Box Sizing

Dua kotak dapat mendeklarasikan width: 200px dengan padding dan border yang sama persis, tetapi tampil dengan ukuran total yang berbeda di layar. Penyebabnya bukan pada angka deklarasi, melainkan pada makna deklarasi itu sendiri — makna yang dikendalikan oleh properti box-sizing . Properti ini memilih apakah width dan height mengukur area konten saja atau keseluruhan kotak hingga tepi luar border. Chapter ini membandingkan kedua perilaku secara langsung dan memperkenalkan reset universal yang menjadi praktik umum di hampir semua proyek web.

Dua Makna Deklarasi width #

Nilai bawaan box-sizing: content-box membuat width dan height hanya mengukur area konten. Padding dan border ditambahkan di luar nilai tersebut, sehingga kotak tumbuh melampaui angka yang kita tulis. Pada kotak besar dengan padding tebal, selisihnya bisa mencapai puluhan piksel dan merusak tata letak yang dirancang dengan angka pasti.

Nilai border-box membalik maknanya: width dan height mengukur kotak dari tepi luar border ke tepi luar border yang berlawanan. Padding dan border dimasukkan ke dalam angka itu, sehingga area konten menyusut untuk memberi tempat pada keduanya. Deklarasi width: 200px berarti kotak utuh selebar 200px, apa pun padding dan bordernya. Properti pembatas min-width, max-width, min-height, dan max-height mengikuti makna yang dipilih box-sizing tersebut.

Perhatikan baris terakhir tabel: nilai computed width kedua kotak sama-sama 200px, tetapi yang diukur berbeda. Di sinilah kebingungan klasik berakar — angka yang terbaca di DevTools tidak otomatis berarti lebar total di layar.

Perbandingan Dua Kotak Identik #

Demo chapter ini menampilkan dua kotak dengan deklarasi yang identik kecuali box-sizing:

.kotak-konten {
  box-sizing: content-box;
  width: 200px;
  height: 80px;
  padding: 20px;
  border: 5px solid rgb(2, 132, 199);
}

.kotak-border {
  box-sizing: border-box;
  width: 200px;
  height: 80px;
  padding: 20px;
  border: 5px solid rgb(22, 163, 74);
}

<div class="kotak-konten">content-box</div>
<div class="kotak-border">border-box</div>
<div class="penggaris">penggaris 200px</div>

Hasil di Browser:

Kedua kotak memiliki computed width 200px dan computed padding-top 20px.
Kotak content-box: angka 200px adalah area konten, sehingga lebar total
di layar 250px dan kotak melampaui penggaris. Kotak border-box: angka
200px adalah lebar luar, sehingga area kontennya menyusut menjadi 150px
dan lebar totalnya tepat 200px — sejajar dengan penggaris 200px.

Mari kita telaah bagian yang menentukan:

1. Baris 2 dan Baris 11 (box-sizing): satu-satunya perbedaan antara kedua aturan. Nilai inilah yang mengubah makna seluruh deklarasi ukuran di bawahnya.
2. Baris 3 dan Baris 12 (width: 200px): pada kotak pertama angka ini mengukur konten; pada kotak kedua angka ini mengukur keseluruhan kotak.
3. Baris 5–6 dan Baris 14–15 (padding dan border): pada content-box kedua lapisan menambah ukuran total; pada border-box keduanya dipotong dari angka width, sehingga konten menyusut menjadi 200 − 40 − 10 = 150px.

Reset Universal border-box #

Karena perilaku bawaan sering menyesatkan, hampir semua proyek web memasang reset berikut di awal berkas CSS utama:

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

Selector * menunjuk semua elemen, dan ::before/::after disertakan agar elemen semu ikut memakai makna yang sama. Setelah reset ini aktif, setiap width yang kita tulis berarti lebar kotak utuh — bukan lebar konten yang dapat bertambah melebihi angka tertulis. Tumpukan kartu dalam grid, tombol dalam baris, dan kolom dengan lebar persen menjadi jauh lebih terprediksi karena padding tidak lagi menggeser ukuran akhir.

Keputusan ini sangat umum sehingga sebaiknya Anda menganggap border-box sebagai perilaku standar proyek, dan content-box sebagai pengecualian yang ditulis eksplisit bila benar-benar diperlukan. Chapter Box Model Debugging menunjukkan cara memeriksa nilai box-sizing sebuah elemen melalui DevTools ketika layout berperilaku tidak terduga.