Box Model: Cara Browser Menghitung Ukuran

Setiap elemen adalah kotak

Di mata browser, semua elemen HTML adalah kotak persegi. Kotak itu punya empat lapisan dari dalam ke luar: content (isi), padding (jarak dalam), border (bingkai), dan margin (jarak luar).

.kotak {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Pertanyaannya: berapa lebar total kotak di atas?

Jebakan perhitungan default

Secara default (box-sizing: content-box), width: 200px hanya mengatur content-nya saja. Lebar total yang dirender browser adalah:

200 (content) + 40 (padding kiri-kanan) + 10 (border kiri-kanan) = 250px

Margin tidak ikut dihitung dalam ukuran kotak, tapi menambah jarak ke elemen lain. Inilah kenapa layout sering "bocor" melebar tanpa diduga: kamu pikir kotaknya 200px, ternyata 250px.

Solusinya: border-box

* {
  box-sizing: border-box;
}

Dengan border-box, width: 200px berarti total 200px sudah termasuk padding dan border. Content-nya yang mengalah dan menyusut. Jauh lebih intuitif: apa yang kamu tulis, itu yang kamu dapat.

Catatan teknis: baris * { box-sizing: border-box; } hampir selalu ada di awal stylesheet project profesional, framework seperti Tailwind dan Bootstrap juga menerapkannya secara default. Kalau kamu hanya ingat satu hal dari modul ini, ingatlah baris ini.

Melihat box model di DevTools

Buka DevTools browser (F12), arahkan ke tab Elements/Inspector, pilih sebuah elemen. Di panel Styles atau Computed ada diagram box model berwarna yang menunjukkan ukuran content, padding, border, margin secara live. Ini alat debug layout nomor satu, biasakan memakainya.

Contoh perhitungan nyata

* {
  box-sizing: border-box;
}

.kartu {
  width: 300px;       /* total tetap 300px */
  padding: 24px;      /* content menyusut jadi 252px */
  border: 2px solid #ddd;
}

Tanpa border-box, kartu di atas akan melebar jadi 352px dan bisa merusak grid yang sudah rapi.

Rangkuman

Ingat urutannya: content, padding, border, margin. Default browser menghitung width hanya untuk content sehingga totalnya membengkak. Terapkan box-sizing: border-box secara global supaya width yang kamu tulis adalah lebar final yang sebenarnya.