Di CSS, setiap elemen adalah kotak. Box model adalah cara browser menghitung ukuran kotak itu: isinya di tengah, lalu dibungkus tiga lapis, yaitu padding, border dan margin. Kayak paket kiriman: barangnya, bubble wrap di dalam kardus, kardusnya, lalu jarak ke paket sebelahnya.
🧪 Tebakan cepat: kotak dengan
width: 200pxdikasihpadding: 20px. Di layar, lebarnya masih 200px? Tebak dulu, jawabannya ada di bagian "Kenapa kotaknya jadi lebih lebar".
Empat lapis sebuah kotak
<div class="box">Konten</div>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
</style>
.boxadalah selector: aturan di dalam kurung kurawal{ }berlaku buat elemen denganclass="box".width: 200pxadalah lebar content, yaitu isi kotak (di sini teks "Konten").padding: 20pxadalah ruang di dalam kotak, antara isi dan garis tepinya. Warna background kotak ikut mewarnai padding.border: 5px solid blackadalah garis tepi: tebal 5px, garis penuh (solid), warna hitam.margin: 10pxadalah ruang kosong di luar garis tepi, jarak ke elemen lain. Margin selalu transparan.
Jadi urutannya dari dalam ke luar: content, padding, border, margin. Tiap baris ditulis properti: nilai; (satu titik dua, diakhiri titik koma), dan semuanya ada di dalam { } milik selectornya.
Kenapa kotaknya jadi lebih lebar
Bawaan browser adalah box-sizing: content-box. Artinya width cuma mengatur lebar isinya. Padding dan border ditambahkan di luarnya, dan dua-duanya ada di kiri dan kanan:
200 (content) + 20 + 20 (padding) + 5 + 5 (border) = 250px
Jawaban tebakan: bukan 200px. Dengan padding: 20px saja, kotaknya jadi 240px. Margin gak dihitung, karena margin itu jarak di luar kotak, bukan bagian kotaknya.
border-box: width jadi lebar total
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
Dengan box-sizing: border-box, padding dan border masuk ke dalam width. Kotaknya tetap 200px di layar, dan isinya yang mengalah: 200 - 40 - 10 = 150px. Lebih gampang ditebak, makanya banyak developer menaruh ini di awal CSS-nya. Tanda * artinya "semua elemen":
* {
box-sizing: border-box;
}
Butuh dua kotak dengan box-sizing yang beda? Selector dengan koma, misalnya .a, .b { ... }, memberi nilai yang sama ke dua-duanya. Nilai yang beda butuh aturan sendiri per class, masing-masing dengan { dan }:
.a { box-sizing: content-box; }
.b { box-sizing: border-box; }
⚠️ Jebakan yang sering ketemu
- Salah ketik nama properti.
boz-sizingataubox-sizegak dikenal browser, jadi diabaikan diam-diam tanpa pesan error. - Kurung kurawal gak lengkap.
.b box-sizing: border-box;tanpa{ }bikin aturan itu (dan sering juga yang sesudahnya) dibuang browser. - Padding dihitung sekali. Padding dan border ada di dua sisi, jadi buat lebar total, kalikan dua.
width: 100%plus padding. Dengancontent-box, kotaknya jadi lebih lebar dari induknya dan meluber keluar.border-boxmencegahnya.
🔬 Coba sendiri
Geser nilainya dan lihat tiap lapis berubah.
TL;DR: Tiap elemen adalah kotak dengan empat lapis, dari dalam ke luar: content, padding, border, margin. Dengan bawaan box-sizing: content-box, width cuma lebar isinya, jadi padding dan border menambah lebar di kiri dan kanan (200 + 20 + 20 + 5 + 5 = 250px). Dengan box-sizing: border-box, padding dan border masuk ke dalam width, jadi kotaknya tetap selebar width. Margin selalu di luar kotak.
