Setiap elemen HTML dirender browser sebagai sebuah kotak. Section ini menjelaskan anatomi kotak tersebut, cara menghitung ukurannya, perilaku box-sizing, fenomena margin collapse, serta cara memeriksa dan mendebug kotak melalui DevTools.

# Content, Padding, Border, dan Margin

Bedah anatomi kotak CSS — content, padding, border, dan margin — beserta cara menghitung ukuran total elemen di layar.

Buka → # Box Sizing

Pahami perbedaan box-sizing content-box dan border-box serta alasan reset universal border-box menjadi praktik umum.

Buka → # Margin Collapse

Pahami kapan margin atas dan bawah bergabung menjadi satu jarak, tiga kasus margin collapse, dan kondisi yang menghentikannya.

Buka → # Width dan Height

Atur ukuran elemen dengan width dan height, pahami perilaku nilai auto, serta kapan deklarasi ukuran diabaikan.

Buka → # min-width, max-width, min-height, dan max-height

Batasi ukuran elemen dengan min-width, max-width, min-height, dan max-height beserta urutan penerapannya terhadap width dan height.

Buka → # Overflow

Atur nasib konten yang meluber dari kotaknya dengan nilai visible, hidden, scroll, auto, dan clip beserta pengaturan per sumbu.

Buka → # Box Model Debugging

Gunakan DevTools — panel Computed dan diagram box model — serta teknik outline sementara untuk mendiagnosis kotak yang berperilaku tidak sesuai harapan.

Buka →