Properti Box-Sizing

Chapter Content-Box dan Border-Box sudah memperkenalkan dua wajah box-sizing: content-box yang mengukur content saja dan border-box yang mengukur sampai tepi border. Chapter ini melangkah ke praktik rekayasanya: dua pola reset yang lazim dipakai proyek nyata, hubungan box-sizing dengan min-/max-width, serta dua situasi klasik yang justru membutuhkan content-box — foto berbingkai dan widget pihak ketiga. Setelah chapter ini, keputusan box-sizing tidak lagi terasa sebagai teori, melainkan keputusan desain yang bisa dipertanggungjawabkan.

Rekap Singkat Dua Nilai #

Nilai	`width` mengatur	Ukuran kotak terlihat
`content-box` (default)	Hanya lapis content	`width` + padding + border
`border-box`	Content + padding + border	Persis `width`

Satu sifat property ini menjadi dasar seluruh pola di chapter ini: box-sizing tidak diwariskan. Nilainya berlaku per elemen, sehingga menyetel induk saja tidak menjangkau elemen anak — itulah alasan reset memakai selector universal, dan alasan pola kedua di bawah ini dibuat sedemikian rupa.

Dua Pola Reset #

Pola pertama sudah kita lihat pada chapter sebelumnya — reset universal yang menjangkau semua elemen sekaligus:

css
/* Pola 1: universal, paling umum */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Pola kedua menyambungkan warisan secara manual: box-sizing: border-box ditegakkan di akar dokumen, lalu setiap elemen mewarisi nilainya dari induknya:

css
/* Pola 2: inherit — mudah di-override per cabang */
html {
  box-sizing: border-box;
}

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

Hasil keduanya identik untuk seluruh halaman, tetapi pola inherit membuka pintu keluar yang rapi: cukup satu deklarasi box-sizing: content-box pada akar komponen tertentu, dan seluruh turunannya ikut content-box lewat mekanisme warisan — tanpa menulis selector per elemen. Dengan pola universal, komponen yang menolak border-box harus mendeklarasikan ulang nilainya di setiap elemen internalnya.

box-sizing Ikut Mengatur min- dan max-width #

Perlu digarisbawahi: box-sizing tidak hanya mengubah makna width dan height, tetapi juga min-width, max-width, min-height, dan max-height. Ketiganya mengacu pada kotak yang sama. Contohnya paling sering dijumpai pada pola lebar maksimum:

css
.wadah-berita {
  max-width: 100%; /* border-box: tepi border tidak melampaui induk */
  padding: 20px;
  border: 4px solid #1f6f54;
}

.wadah-berita--content {
  box-sizing: content-box; /* max-width hanya untuk lapis content */
}

Demo menempatkan dua kartu berdeklarasi sama di dalam wadah 300px; satu-satunya perbedaan adalah box-sizing yang dideklarasikan eksplisit:

Bila induknya 320px, versi content-box melampaui: max-width: 100% memberi 320px untuk content, lalu padding 40px dan border 8px menambah totalnya menjadi 368px.

Ketika Satu Elemen Memilih content-box #

Di halaman yang sudah ber-border-box, sesekali ada satu elemen yang justru ingin content-box — biasanya karena lebar content-nya harus tetap pasti meski bingkai berubah:

css
.stempel-foto {
  box-sizing: content-box; /* bingkai berada di luar ukuran foto */
  width: 96px;             /* foto selalu 96px, apa pun ketebalan bingkai */
  padding: 8px;
  border: 4px solid #ffffff;
}

Demo berikut menyandingkan stempel yang sama dalam dua mode:

Memperbesar bingkai hanya menambah ukuran stempel keseluruhan, dan dengan border-box menambah padding justru menyusutkan fotonya. Pedoman singkatnya: pilih content-box bila angka yang harus stabil adalah content-nya, pilih border-box bila yang harus stabil adalah kotak keseluruhannya.

Widget yang CSS-nya ditulis dengan asumsi content-box akan tampil menyempit di halaman border-box: input form kehilangan beberapa piksel, ikon bergeser, grid internalnya tidak rapat. Perbaikannya men-scope mode kembali pada widget tersebut:

css
.widget-chat,
.widget-chat * {
  box-sizing: content-box; /* kembalikan asumsi bawaan widget */
}

Dengan pola reset inherit, cukup deklarasikan nilai itu pada elemen akar widget saja dan seluruh turunannya mengikuti. Area di luar widget tetap border-box — satu halaman bisa memuat dua mode sekaligus tanpa saling mengganggu.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
`max-width: 100%` tetapi elemen meluap dari induk	Elemen ber-`content-box`; padding dan border ditambahkan di luar	Pastikan reset `border-box` aktif, atau kurangi `max-width` secara manual
Konten menyusut setelah reset dipasang	`width` lama ditulis dengan asumsi `content-box`	Sesuaikan `width`, atau beri `content-box` khusus pada elemen itu
Widget pihak ketiga tampil sempit dan bergeser	Widget mengasumsikan `content-box` di halaman `border-box`	Beri `box-sizing: content-box` ter-scope pada akar widget
Reset tidak berlaku pada elemen tertentu	Aturan `box-sizing` lain menimpanya lewat specificity	Periksa panel Styles DevTools dan cari aturan yang bersaing

Ringkasan #

box-sizing menentukan kotak mana yang diukur oleh width, height, serta seluruh variasi min- dan max-nya. Reset universal menegakkan border-box untuk seluruh halaman, sedangkan pola html + box-sizing: inherit memberi jalur keluar yang rapi bagi komponen yang memang butuh content-box. Dengan keputusan ukuran yang mantap, kita beralih ke lapisan visual kotak: chapter berikutnya membahas border-radius untuk membentuk sudutnya.