Width dan Height

Elemen block sebenarnya sudah punya kebijakan ukuran yang baik tanpa kita tulis apa pun: lebarnya mengisi ruang induk, tingginya mengikuti isi. Menyetel width dan height secara eksplisit mengganti kebijakan itu — kadang memang diperlukan, kadang justru menimbulkan masalah berupa elemen meluber atau teks terpotong. Chapter ini membahas cara kerja width dan height, perilaku value auto yang sering diremehkan, dan kapan menyetel angka menjadi keputusan yang tepat.

Lebar Default: width: auto #

Pada elemen block, width: auto berarti mengisi ruang horizontal induk tanpa meluber. Browser menghitung lebar konten setelah menyisakan ruang untuk padding dan border elemen itu, sehingga totalnya selalu pas dengan induk. Inilah sebabnya paragraf dan div default tampil membentang rapi dari tepi ke tepi.

width: 100% terlihat mirip tetapi bekerja berbeda. Nilai ini menyetel lebar konten sama dengan lebar konten induk, lalu padding dan border ditambahkan di luar angka tersebut — pada box-sizing bawaan (content-box). Hasil totalnya melebihi induk dan elemen meluber ke kanan.

.panel-auto {
  width: auto;   /* total pas dengan induk */
}

.panel-persen {
  width: 100%;   /* konten 100%, padding dan border jadi tambahan */
}

Perhitungan lengkap box-sizing dibahas pada section Box Model; untuk sekarang cukup pegang aturan praktisnya.

Mari kita bandingkan keduanya pada angka konkret: elemen induk selebar 400px berisi panel yang diberi padding 16px di tiap sisi dan border 2px.

1. Dengan width: auto: browser membagi 400px untuk seluruh kotak panel — padding dan border ikut di dalamnya — sehingga lebar konten tersisa 364px. Total kotaknya tepat 400px.
2. Dengan width: 100%: lebar konten langsung disetel 400px, lalu padding 32px dan border 4px ditambahkan di luarnya. Total kotaknya 436px — 36px lebih lebar dari induk.

Bedanya hanya satu karakter (auto versus 100%), tetapi hasilnya berbeda 36px. Kebiasaan yang sehat: biarkan lebar block pada auto kecuali ada alasan desain yang jelas.

Demo berikut menaruh tiga panel di tiga bingkai berukuran sama — panel pertama memakai auto, panel kedua 100% dengan box-sizing bawaan browser, panel ketiga angka tetap 220px:

Tinggi Default: height: auto #

height: auto mengikuti konten: teks bertambah, tinggi bertambah; teks menyusut, tinggi menyusut. Perilaku ini biasanya persis yang diinginkan, karena kita jarang tahu pasti seberapa panjang teks yang akan ditulis pengelola konten.

Masalah muncul saat kita mengunci tinggi dengan angka. Teks yang berputus lebih panjang dari perkiraan — karena font berbeda, layar lebih sempit, atau pengguna menaikkan ukuran font — akan terpotong atau meluber dari kotaknya. Untuk tinggi, nilai yang lebih aman adalah min-height: kotak dijamin minimal setinggi angka tersebut, tetapi tetap boleh tumbuh mengikuti isinya.

.kartu-ringkas {
  min-height: 160px; /* minimal 160px, tetap tumbuh bila isi lebih panjang */
}

Kapan Menyetel Eksplisit #

Menyetel width dan height dengan angka menjadi keputusan tepat pada situasi berikut:

• Lebar tetap yang disengaja: sidebar 280px, thumbnail 96px, ikon 24px.
• Lebar mengikuti ruang: kolom konten width: 70% berdampingan dengan sidebar width: 30%.
• Tinggi minimum visual: banner atau kartu yang harus terlihat lapang memakai min-height.
• Rasio tetap: gambar dan video dengan aspect-ratio yang dipasangkan lebar luwes.

Selain itu ada value bernama fit-content yang membuat lebar elemen block menyusut mengikuti isinya — kebalikan perilaku auto — berguna untuk elemen yang harus selebar teksnya saja.

Kesalahan Umum #

Ringkasan #

width: auto mengisi induk tanpa meluber, width: 100% menyetel konten saja dan bisa meluber saat ada padding, sementara height: auto mengikuti isi dan jauh lebih aman daripada tinggi tetap yang berisiko memotong teks. Ketika desain menuntut ukuran tertentu, min-height memberi jaminan visual tanpa memotong konten. Berikutnya kita menyempurnakan kendali ini dengan rentang: min-width dan max-width.