Setiap elemen HTML adalah sebuah kotak (box). Box Model menjelaskan bagaimana ukuran kotak itu dihitung. Dari dalam ke luar, box model terdiri dari:

💡 Revolusi box-sizing: border-box. Default content-box bikin pemula nangis: set width: 200px + padding: 20px = kotak jadi 240px (padding nambah ke luar). Tahun 2012 Paul Irish populerin trick * { box-sizing: border-box } di reset CSS — sekarang jadi standar de facto di semua framework modern (Tailwind, Bootstrap, hampir semua reset stylesheet). Bikin width = lebar kotak yang kamu liat. Cek source code framework apapun, line ini selalu ada di awal.

1. Content — isi elemen (teks, gambar)
2. Padding — jarak antara konten dan border
3. Border — garis tepi elemen
4. Margin — jarak luar elemen ke elemen lain

Secara default (box-sizing: content-box), width dan height hanya mengatur ukuran content. Padding dan border ditambahkan di luarnya.

/* Total lebar = 200 + 20 + 20 + 2 + 2 = 244px */
div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

Dengan box-sizing: border-box, width dan height termasuk padding dan border:

/* Total lebar = 200px (padding & border masuk di dalamnya) */
div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

Praktik umum adalah menggunakan border-box untuk semua elemen:

* {
  box-sizing: border-box;
}

🎭 Analogi sehari-hari

Box model = paket kado berlapis:

• Content = isi kado (boneka/buku).
• Padding = busa pembungkus di dalam kotak (jaga isi tidak nempel kotak).
• Border = kotak kado itu sendiri.
• Margin = jarak ke kado tetangga di rak.

box-sizing: border-box = "ukuran kado total tetap, isi yang nyusut" vs default content-box "isi tetap, kado total membesar".

⚠️ Jebakan yang sering ditemui

• Default content-box bikin layout pecah — width: 100% + padding: 20px = total lebih dari 100%, container overflow. Solusi: box-sizing: border-box global.
• Margin collapse — margin vertikal dua elemen bersebelahan tidak ditambah, tapi diambil yang terbesar. margin-bottom: 20px di paragraf 1 + margin-top: 30px di paragraf 2 = jarak total 30px, bukan 50px. Hanya terjadi pada blok vertikal.
• Margin tidak berlaku di inline element — <span> tidak peduli margin-top/margin-bottom. Ubah ke inline-block atau pakai padding.
• width: auto ≠ width: 100% — auto menyesuaikan parent (sudah hitung margin/padding), 100% literal lebar parent (bisa overflow kalau ada margin/padding).

TL;DR: Tiap elemen = kotak terdiri 4 layer dari dalam ke luar: content → padding → border → margin. Default box-sizing: content-box bikin width hanya untuk content (padding + border nambah ke luar). Modern: pakai box-sizing: border-box global biar width = total kotak yang kelihatan.

🎯 content-box vs border-box — pilih yang mana?

• Project baru / app modern → border-box GLOBAL (* { box-sizing: border-box }) — udah jadi standar industri
• Override 3rd-party widget yang assume content-box → match the widget
• Form input native → kadang content-box default lebih cocok untuk konsistensi dengan browser default
• Default browser → content-box (sayang, tapi sejarah)

Aturan praktis: 99% kasus = border-box. Set sekali di reset CSS, lupakan. width: 100% jadi literal 100% walau ada padding/border — gak overflow lagi.