CSS · Bab 4

Box Model

Memahami setiap elemen sebagai kotak berisi content, padding, border, dan margin, memakai box-sizing border-box, membatasi lebar dengan width dan max-width, menengahkan blok, serta mengenali margin collapse.

Bagi browser, setiap elemen adalah kotak. Cara kotak itu diukur, diberi jarak dalam, garis tepi, dan jarak luar disebut box model. Hampir semua masalah “kenapa jaraknya begini?” bisa dijawab dengan memahami bab ini.

4.1 Empat Lapisan Kotak

Dari dalam ke luar:

1. content: isi elemen (teks, gambar).
2. padding: jarak dalam antara isi dan garis tepi. Latar belakang elemen ikut mewarnai padding.
3. border: garis tepi.
4. margin: jarak luar ke elemen lain. Margin selalu transparan.

4.2 Padding, Border, Margin, dan Bentuk Singkat

padding dan margin bisa ditulis untuk tiap sisi (padding-top, margin-left, dan seterusnya), atau dengan bentuk singkat:

border ditulis dengan tebal, gaya, dan warna, misalnya border: 2px solid #94a3b8. Gaya garis (solid, dashed, dotted) wajib ada, karena gaya bawaannya none sehingga tanpa gaya garis tidak tampil. border-radius membulatkan sudut.

4.3 box-sizing: border-box

Secara bawaan (box-sizing: content-box), width hanya mengukur content. Lebar total kotak menjadi width + padding kiri dan kanan + border kiri dan kanan. Kartu di 4.1 lebarnya 200 + 20 + 20 + 5 + 5 = 250px, bukan 200px.

Dengan box-sizing: border-box, width sudah termasuk padding dan border, sehingga lebar total tetap 200px dan jauh lebih mudah diperkirakan. Hampir semua proyek memasang aturan ini di awal CSS-nya:

*,
*::before,
*::after {
  box-sizing: border-box;
}

4.4 width, max-width, dan margin: 0 auto

Elemen blok seperti <div> dan <p> secara bawaan selebar induknya. width menetapkan lebar tetap, yang bisa kebesaran di layar sempit. max-width membatasi lebar maksimal, tetapi kotak tetap boleh menyempit. Untuk wadah halaman, max-width hampir selalu lebih tepat. Baris teks yang terlalu panjang juga melelahkan mata, jadi batasi lebar wadah teks.

Untuk menengahkan elemen blok, beri lebar (atau max-width) lalu margin: 0 auto. Margin kiri dan kanan auto membagi sisa ruang sama rata. Cara ini tidak menengahkan teks di dalam kotak (itu tugas text-align: center) dan tidak bekerja pada elemen inline.

4.5 Margin Collapse

Margin collapse terjadi pada margin vertikal elemen blok yang bersebelahan: kedua margin tidak dijumlahkan, tetapi melebur menjadi yang terbesar. Margin atas anak pertama juga bisa “bocor” ke luar induknya bila induk tidak punya padding atau border atas.

Margin collapse tidak terjadi pada margin horizontal, dan tidak terjadi di antara item di dalam wadah flex atau grid (bab 6 dan 7).

4.6 Ringkasan

• Setiap elemen adalah kotak: content, padding, border, margin.
• Bentuk singkat padding dan margin berurutan atas, kanan, bawah, kiri.
• Pasang box-sizing: border-box agar width mencakup padding dan border (bawaannya content-box).
• Pakai max-width untuk wadah, dan margin: 0 auto untuk menengahkannya.
• Margin vertikal yang bersebelahan melebur (margin collapse); bila perlu jarak pasti, pakai margin satu arah saja atau padding.