Section ini membahas box model sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Memahami Box Model

Kenali empat lapis kotak yang menyusun setiap elemen HTML dan pelajari cara browser menghitung ukuran totalnya.

Buka → # Content, Padding, Border, dan Margin

Bedah empat komponen box model beserta property-nya, dan pelajari kapan sebaiknya memakai padding atau margin.

Buka → # Content-Box dan Border-Box

Kuasai property box-sizing: pilih apakah width hanya menghitung content, atau sekaligus padding dan border.

Buka → # Padding

Atur ruang di dalam elemen dengan padding: longhand, shorthand, persentase, batasan nilainya, dan resep praktis.

Buka → # Border

Gambar garis tepi elemen dengan border: width, style, color, border per sisi, dan trik anti geser saat hover.

Buka → # Margin

Kuasai margin: shorthand, auto untuk perataan tengah, nilai negatif, dan perilakunya pada elemen inline.

Buka → # Margin Collapse

Pahami mengapa margin vertikal bergabung menjadi satu ruang, mengapa jarak terasa lebih kecil dari yang ditulis, dan cara mengendalikannya.

Buka → # Properti Box-Sizing

Perdalam box-sizing: pola reset inherit, interaksinya dengan min- dan max-width, hingga penanganan widget pihak ketiga.

Buka → # Border Radius

Bentuk sudut kotak dengan border-radius: urutan nilai, lingkaran dan ellipse, bentuk pill, hingga memotong sudut gambar.

Buka → # Box Shadow

Bangun kedalaman visual dengan box-shadow: sintaks lengkap, bayangan tajam vs lembut, penumpukan shadow, dan sistem elevasi tiga tingkat.

Buka → # Overflow

Kendalikan konten yang meluap: visible, hidden, scroll, auto, overflow: clip, aturan pasangan overflow-x/y, dan kaitannya dengan BFC.

Buka → # Debugging Box Model

Gunakan diagram box model di panel Computed DevTools untuk melacak elemen terlalu lebar, jarak tak terduga, dan konten menempel tepi.

Buka →