Width adalah lebar elemen — seberapa melebar ke samping. Height adalah tingginya — seberapa menjulang ke bawah. Gampangnya: width = lebar, height = tinggi. Ukurannya bisa pixel pasti (200px), persen dari parent (50%), atau setinggi layar (100vh).

🧪 Tebakan cepat — persen itu dari mana? Ada kotak parent selebar 400px, di dalamnya ada div dengan width: 50%. Div-nya jadi selebar apa? Jawabannya: 200px — persen selalu dihitung dari ukuran parent-nya, bukan dari layar.

🎯 Pakai satuan yang mana? px = ukuran pasti, gak berubah-ubah. % = ngikut parent, buat layout lentur. vh/vw = ngikut layar, cocok buat hero section setinggi layar. auto = biarin browser yang ngitung — default paling aman.

Beli baju online tanpa cek size chart? Bisa jadi disaster — bisa kekecilan ngepres badan, bisa kegedean kayak dipake tirai. Ukuran itu krusial. CSS width dan height ngatur dimensi tiap elemen — tapi ada banyak cara nentuin: bisa pixel pasti (200px), bisa persentase parent (50%), bisa relatif viewport (100vh), bahkan bisa hitung otomatis (auto).

🤔 Tahukah kamu? 100vh (viewport height) di mobile ada bug klasik: address bar HP makan space tapi gak dihitung. Solusi modern: pake 100dvh (dynamic viewport height) yang adapt pas address bar muncul/hilang. Detail kecil yang nentuin web kamu enak dipake apa enggak di HP.

Berikut contoh penggunaan properti height dan width:

height: 30px;
width: 50px;

🎭 Analogi sehari-hari

width/height = ukuran kotak kado. Konten lebih besar dari kotak = mendobrak (overflow). Kotak kebesaran = ruang kosong di dalam.

⚠️ Jebakan yang sering ditemui

• height: 100% butuh parent juga punya height definite — kalau parent auto, 100% jadi 0. Pakai height: 100vh untuk full viewport.
• width: 100% di element dengan padding = overflow parent (kalau content-box). Pakai box-sizing: border-box global.
• min-width / max-width sering lebih berguna dari width — fleksibel + tidak pecah responsive.
• width: auto ≠ width: 100% — auto adapt ke content/parent. 100% literal.
• Image tanpa width/height HTML = layout shift. Set di HTML attr atau CSS aspect-ratio.
• vh/vw = viewport units. Mobile address bar bikin 100vh overflow — pakai 100dvh (dynamic).