Content, Padding, Border, dan Margin

Setiap elemen HTML yang dirender oleh browser menempati sebuah kotak, dan kotak tersebut tersusun dari empat lapisan yang berurutan dari dalam ke luar: content, padding, border, dan margin. Lapisan-lapisan inilah yang menentukan seberapa besar sebuah elemen tampak di layar dan seberapa jauh jaraknya ke elemen lain. Hampir semua persoalan tata letak — kartu yang terlalu lebar, tombol yang terlalu rapat, atau deretan kartu yang tidak sejajar — berakar pada cara kita mengatur empat lapisan tersebut. Pada Chapter ini kita membedah anatomi kotak secara rinci, menghitung ukuran totalnya, lalu membuktikannya dengan demo yang dapat dibuka langsung di browser.

Empat Lapisan Setiap Kotak Elemen #

Dokumentasi pengantar box model di MDN menggambarkan elemen sebagai kotak berlapis. Urutan lapisannya selalu sama: area konten berada paling dalam, diikuti padding, lalu border, dan margin sebagai lapisan paling luar.

Dua lapisan terluar berperilaku sangat berbeda. Padding menempel pada kotak dan ikut diwarnai oleh background-color, sedangkan margin berada sepenuhnya di luar kotak sehingga tetap transparan apa pun latar halamannya. Karena itu margin lazim disebut jarak antarelemen, sementara padding disebut jarak antara konten dengan tepi kotaknya sendiri.

Contoh: Kotak dengan Padding dan Border #

Demo chapter ini menampilkan satu kotak berlapis lengkap dengan keempat lapisannya. Berikut CSS yang dipakai demo tersebut:

.kotak {
  box-sizing: content-box;
  width: 200px;
  height: 120px;
  padding: 20px;
  border: 5px solid rgb(2, 132, 199);
  margin: 24px;
  background-color: rgb(219, 234, 254);
}

HTML pendampingnya cukup satu elemen:

<div class="kotak">
  Konten 200 × 120px
</div>

Hasil di Browser:

Kotak tampil dengan area konten 200×120px (computed width: 200px),
padding 20px di setiap sisi (computed padding-top: 20px), border biru
5px solid (computed border-top-width: 5px), dan jarak 24px ke elemen
di sekelilingnya (computed margin-top: 24px). Lebar total yang
ditempati di layar = 200 + (2 × 20) + (2 × 5) = 250px.

Mari kita telaah deklarasinya baris demi baris:

1. Baris 2 (box-sizing: content-box): menegaskan perilaku bawaan browser — nilai width dan height hanya mengukur area konten. Deklarasi ini kita tulis eksplisit agar maksud demo terbaca jelas.
2. Baris 3–4 (width dan height): menetapkan ukuran area konten sebesar 200×120px.
3. Baris 5 (padding: 20px): menambahkan bantalan 20px pada keempat sisi; satu nilai berlaku untuk atas, kanan, bawah, dan kiri.
4. Baris 6 (border: 5px solid ...): menggambar garis tepi setebal 5px dengan gaya solid dan warna biru. Border terlihat, berbeda dari padding yang transparan.
5. Baris 7 (margin: 24px): memberi jarak 24px antara kotak dengan elemen mana pun di sekelilingnya.
6. Baris 8 (background-color): mewarnai area konten dan padding; area margin tetap tidak berwarna.

Menghitung Ukuran Total Kotak #

Dengan box-sizing: content-box, ukuran total di layar adalah jumlah seluruh lapisan pada sumbu yang sama:

Rumusnya sederhana: lebar total = width + padding kiri + padding kanan + border kiri + border kanan. Margin tidak ikut dihitung karena margin berada di luar kotak — margin menentukan jarak, bukan ukuran kotak.

Perilaku ini berasal dari nilai bawaan box-sizing , yaitu content-box. Banyak pengembang menggantinya dengan border-box agar deklarasi width langsung berarti lebar kotak utuh; perbandingan keduanya kita bahas pada Chapter Box Sizing .