CSS 05: Box Model, Padding, Border, dan Margin

Browser memperlakukan setiap elemen sebagai kotak. Dari dalam ke luar, kotak terdiri dari content, padding, border, dan margin.

1. Melihat Empat Lapisan Box Model

• Content adalah isi, misalnya teks atau gambar.
• Padding adalah ruang di antara content dan border.
• Border adalah garis batas kotak.
• Margin adalah ruang di luar border terhadap elemen lain.

Padding menerima warna latar elemen, sedangkan margin transparan.

2. border-box

Dengan nilai bawaan content-box, width hanya menghitung content sehingga padding dan border ditambahkan di luar. Aturan box-sizing: border-box pada contoh membuat width sudah mencakup content, padding, dan border.

Pola berikut umum dipasang di awal stylesheet: *, *::before, *::after { box-sizing: border-box; }.

3. Shorthand dan Margin Otomatis

padding: 8px 16px 24px 32px dibaca dari atas, kanan, bawah, lalu kiri. Dua nilai seperti margin: 16px auto berarti jarak vertikal 16px dan margin horizontal otomatis.

margin-inline: auto menengahkan elemen block jika lebarnya lebih kecil dari ruang induk, seperti .container dan .kartu pada contoh.

4. Margin Collapse

Margin vertikal dua elemen block dapat bergabung, bukan selalu dijumlahkan. Padding, border, Flexbox, dan Grid dapat mengubah perilaku tersebut. Untuk jarak antarelemen dalam Flexbox atau Grid, gap biasanya lebih mudah diprediksi.

Debug dengan DevTools

Pilih .kartu melalui DevTools lalu lihat diagram Box Model pada panel Computed. Anda dapat melihat content, padding, border, dan margin secara langsung.

Latihan

Ubah padding, border, dan margin .kartu. Hapus box-sizing: border-box, beri kartu width: 300px, lalu bandingkan lebar akhirnya melalui DevTools.

Rangkuman

Box Model menjelaskan dari mana ukuran dan jarak elemen berasal. Gunakan border-box, bedakan padding dari margin, dan manfaatkan DevTools ketika ukuran tidak sesuai harapan.