Width dan Height

Properti width dan height menetapkan ukuran area konten sebuah elemen. Nilainya dapat berupa angka pasti seperti 300px, atau kata kunci auto yang menyerahkan perhitungan kepada browser. Nilai auto bukan berarti tanpa aturan: browser menghitungnya dengan algoritma yang konsisten, dan hasilnya berbeda menurut jenis elemen. Chapter ini membahas perilaku width dan height pada elemen block dan inline, perilaku nilai auto, serta waktu yang tepat untuk memilih nilai tetap.

Jenis Elemen Menentukan Efek width dan height #

Elemen block seperti div dan p menerima width dan height dengan patuh. Bila width tidak ditetapkan, elemen mengisi penuh lebar containing block-nya; bila height tidak ditetapkan, tingginya mengikuti isi. Sebaliknya, elemen inline non-replaced seperti span, strong, dan a mengabaikan kedua properti tersebut — ukurannya sepenuhnya mengikuti konten teksnya, karena elemen inline mengalir di dalam baris, bukan menjadi kotak tersendiri.

Apabila Anda membutuhkan kotak berukuran tetap yang tetap berdampingan dengan teks, gunakan display: inline-block — jenis elemen ini menghormati width dan height seperti block, tetapi tidak memaksa baris baru.

Nilai persentase juga dapat dipakai pada kedua properti. width: 50% berarti separuh lebar containing block, dan nilainya ikut berubah ketika induknya berubah. Untuk height berbasis persen, induk harus memiliki tinggi yang terukur: deklarasi height: 50% pada anak dari induk ber-height: auto dihitung sebagai auto, karena tinggi induknya sendiri belum pasti. Perilaku ini penting diingat ketika sebuah kotak tampak tidak patuh terhadap persentase tingginya.

Contoh: Nilai Tetap dan Nilai auto #

Demo chapter ini menampilkan empat situasi dalam satu halaman:

.wadah {
  width: 500px;
  outline: 1px dashed rgb(148, 163, 184);
}

.lebar-tetap {
  width: 300px;
  height: 80px;
}

.lebar-auto {
  height: 60px; /* width tidak ditulis: browser memakai auto */
}

.tinggi-auto {
  width: 300px; /* height tidak ditulis: browser memakai auto */
}

.isi-di-dalam {
  height: 40px;
}

.teks-inline {
  width: 100px;  /* diabaikan: elemen inline */
  height: 100px; /* diabaikan: elemen inline */
}

.blok-inline {
  display: inline-block;
  width: 100px;
  height: 40px;
}

<div class="wadah">
  <div class="lebar-tetap">width: 300px</div>
  <div class="lebar-auto">width: auto</div>
</div>
<div class="tinggi-auto">
  <div class="isi-di-dalam">height: 40px</div>
</div>
<p>
  <span class="teks-inline">teks inline</span>
  <span class="blok-inline">inline-block</span>
</p>

Hasil di Browser:

Kotak dengan width: 300px terbaca computed width 300px dan computed
height 80px. Kotak tanpa deklarasi width (auto) mengisi penuh wadah
500px, sehingga computed width-nya 500px. Induk tanpa deklarasi height
(auto) menyesuaikan isi sehingga computed height-nya 40px. Span dengan
deklarasi width 100px tetap inline: computed display-nya inline dan
deklarasi ukurannya diabaikan; setelah display-nya diubah menjadi
inline-block, width 100px berlaku (computed width: 100px).

Mari kita telaah poin-poin pentingnya:

1. .lebar-tetap: deklarasi width: 300px dipatuhi penuh karena elemen ini block dan tidak ada aturan lain yang menimpanya.
2. .lebar-auto: tanpa deklarasi width, browser menghitung lebar agar mengisi containing block — di demo ini wadah selebar 500px, sehingga hasil computed-nya 500px.
3. .tinggi-auto + .isi-di-dalam: tinggi induk dihitung dari isi. Anaknya setinggi 40px tanpa margin, sehingga tinggi computed induk tepat 40px.
4. .teks-inline: deklarasi width dan height ditulis tetapi diabaikan; nilai computed width bahkan tidak berupa piksel melainkan auto.
5. .blok-inline: begitu display berubah menjadi inline-block, deklarasi width: 100px dipatuhi.

Memilih antara Nilai Tetap dan auto #

Gunakan nilai tetap ketika ukuran harus pasti — misalnya kolom sidebar atau ikon berukuran seragam. Gunakan auto ketika elemen sebaiknya menyesuaikan: mengisi sisa ruang, atau mengikuti isi. Untuk elemen block berlebar tetap, Anda dapat menengahkannya dengan margin-left: auto; margin-right: auto; browser membagi sisa ruang secara sama rata ke kedua margin.

Satu kaitan yang tidak boleh dilupakan: width dan height mengukur area konten, sehingga padding dan border yang ditambahkan akan memperbesar kotak di layar — kecuali box-sizing diubah ke border-box. Perbandingan lengkap kedua mode tersebut kita bahas pada Chapter Box Sizing .