width mengatur lebar elemen, height mengatur tingginya. Nilainya bisa ukuran pasti kayak 200px, persen dari induknya kayak 50%, atau auto, yang artinya browser yang menghitung sendiri.
🧪 Tebakan cepat: sebuah kotak ada di dalam induk selebar 240px, dan kotaknya diberi
width: 50%. Kotaknya selebar berapa? Tebak dulu, jawabannya ada di bagian "Persen dihitung dari induknya".
Kotak dengan ukuran pasti
<div class="box"></div>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>
.boxadalah selector: aturan di dalam{ }berlaku buat elemen denganclass="box".width: 200pxbikin kotaknya selebar 200 piksel.height: 100pxbikin kotaknya setinggi 100 piksel.background-color: lightgreenmemberi warna latar hijau muda. Tanpa warna,<div>kosong gak kelihatan sama sekali.
Hasilnya, persegi panjang hijau 200 × 100px. Mau kotak persegi? Kasih width dan height angka yang sama. <div> kosong tanpa height tingginya 0, karena tingginya bawaan mengikuti isinya.
Nama warna di CSS pakai bahasa Inggris: orange, red, lightblue, bukan oranye atau merah. Nama yang gak dikenal dibuang browser, dan warnanya gak berubah.
Persen dihitung dari induknya
width: 50% artinya setengah dari lebar induknya, bukan setengah layar. Jawaban tebakan: induknya 240px, jadi kotaknya 120px. Kalau induknya melebar, kotaknya ikut melebar.
Satuan lain yang sering dipakai:
vwdanvh: persen dari layar.1vw= 1% lebar layar, jadi100vwselebar layar.100vhsetinggi layar.auto: bawaan. Elemen block seperti<div>otomatis selebar induknya, dan tingginya mengikuti isinya.
Batas bawah dan batas atas
.artikel {
width: 100%;
max-width: 600px;
}
max-width membatasi lebar maksimal. Di HP, artikel ini selebar layar. Di layar lebar, dia berhenti di 600px dan gak melebar terus. Kebalikannya, min-width menjaga elemen gak lebih kecil dari batas tertentu. Buat tinggi ada pasangannya: min-height dan max-height.
⚠️ Jebakan yang sering ketemu
width: 100%plus padding. Dengan bawaanbox-sizing: content-box, padding ditambahkan di luarwidth, jadi kotaknya lebih lebar dari induknya dan meluber. Pakaiwidth: autoataubox-sizing: border-box.height: 100%gak ngefek. Persen tinggi butuh induk yang tingginya pasti. Kalau tinggi induknyaauto, hasilnya sama kayak gak diatur.- Ukuran di
<span>gak jalan. Elemen inline mengabaikanwidthdanheight. Ubah dulu jadidisplay: inline-blockataublock.
TL;DR: width mengatur lebar, height mengatur tinggi. Pakai px buat ukuran pasti, % buat ukuran yang mengikuti induknya, vw dan vh buat ukuran yang mengikuti layar, atau biarkan auto. max-width dan min-width (juga max-height dan min-height) memberi batas atas dan bawah. Nama warna ditulis dalam bahasa Inggris, misalnya orange.
