Box Model: Content, Padding, Border, Margin

Setiap elemen adalah sebuah kotak

Browser memperlakukan semua elemen HTML sebagai kotak persegi panjang. Setiap kotak punya empat lapisan, dari dalam ke luar:

┌───────────────── margin ─────────────────┐
│  ┌──────────────── border ─────────────┐ │
│  │  ┌───────────── padding ──────────┐ │ │
│  │  │                                │ │ │
│  │  │           content              │ │ │
│  │  │     (teks, gambar, anak)       │ │ │
│  │  └────────────────────────────────┘ │ │
│  └─────────────────────────────────────┘ │
└──────────────────────────────────────────┘

Padding dan margin

.kotak {
  padding: 16px;                 /* semua sisi */
  padding: 8px 24px;             /* atas-bawah | kiri-kanan */
  padding: 8px 16px 24px 32px;   /* atas | kanan | bawah | kiri (searah jarum jam) */
  margin-bottom: 20px;           /* sisi tertentu */
}

Cara menghafal urutan empat nilai: T-R-B-L (Top, Right, Bottom, Left), searah jarum jam seperti "TRouBLe".

Tengahkan blok dengan margin auto

.wadah {
  width: 600px;
  margin: 0 auto;   /* atas-bawah 0, kiri-kanan otomatis → ke tengah */
}

Lebar sebenarnya: jebakan terbesar

Secara bawaan (content-box), width hanya mengatur isi. Padding dan border ditambahkan di luarnya:

.kotak { width: 200px; padding: 20px; border: 5px solid; }
/* lebar total = 200 + 20*2 + 5*2 = 250px */

Itu membingungkan. Solusinya box-sizing: border-box: width sudah termasuk padding dan border, sehingga width: 200px benar-benar 200px. Hampir semua proyek memakai reset ini:

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

Margin collapsing

Margin atas-bawah antar elemen block bisa menyatu: dua elemen dengan margin 20px di antaranya menghasilkan jarak 20px, bukan 40px (yang dipakai yang terbesar). Margin kiri-kanan tidak menyatu.