CSS Width & Height

Mengatur panjang dan tinggi elemen.

width & height adalah ukuran dimensi elemen.
width : adalah panjang elemen.
height : adalah tinggi elemen.

Nilai properti width & height

Nilai dari properti width & height dapat diisi dengan pilihan berikut ini :

1. Nilai satuan panjang misal : px, em, dsb.
2. Persen (%) : nilai perhitungan perseratus dari dimensi elemen induknya.
3. auto : nilai yang ditentukan oleh browser.
4. inherit : nilai panjang menyesuaikan dimensi elemen induk.

<div>
  <span>Dimensi 200px x 100px</span>
</div>

<style>
div {
   background: violet;
   color: white;
   margin: auto;
   width: 200px;
   height: 100px;
   display: block;
}
</style>

Dimensi 300px x 100px

<div class='induk'>
  <span>Elemen induk 300px x 100px</span>
  <div class='konten'>Konten width:70%; height:50%</div>
</div>

<style>
div.induk {
   width: 300px;
   height: 100px;
div.konten {
   width: 70%;
   height: 50%;
}
</style>

Elemen induk 300px x 100px

Konten width:70%; height:50%

<div class='induk'>
  <span>Elemen induk 300px x 100px</span>
  <div class='konten'>Konten width:inherit; height:50%</div>
</div>

<style>
div.induk {
   width: 300px;
   height: 100px;
div.konten {
   width: inherit;
   height: 50%;
}
</style>

Elemen induk 300px x 100px

Konten width:inherit; height:50%

Nilai panjang dan tinggi elemen vs padding.

Ukuran width & height elemen akan terpengaruh oleh padding elemen.
Dengan kata lain, nilai width & height elemen itu tidak termasuk nilai padding elemen.
Kecuali menggunakan nilai persen (%) yang secara otomatis menghitung ukuran panjang elemen dikurangi ukuran padding.

Dibawah ini, contoh elemen dengan panjang yang sama dengan elemen induknya.

<div class='induk'>
  <div class='kontent'></div>
</div>
<style>
div.induk {
   padding: 10px;
   width: 320px;
   height: 100px;
}
div.konten {
   width: inherit; /* = 320px ukuran elemen induk*/
   height: 50%;
}
</style>

Dibawah ini, contoh elemen dengan nilai width menggunakan persen.

<div class='induk'>
  <div class='kontent'></div>
</div>
<style>
div.induk {
   padding: 10px;
   width: 320px;
   height: 100px;
}
div.konten {
   width: 100%;
   height: 50%;
}
</style>