Content-Box dan Border-Box

Di chapter Memahami Box Model kita menghitung bahwa elemen width: 240px dengan padding dan border bisa tampil selebar 280px. Kabar baiknya, perilaku ini bukan sesuatu yang terkunci — CSS menyediakan property box-sizing yang menentukan makna width. Dua nilainya, content-box dan border-box, menghasilkan dua matematika yang sangat berbeda. Chapter ini membandingkan keduanya dan menjelaskan mengapa border-box menjadi konvensi hampir seluruh proyek web modern.

Dua Makna untuk Satu width #

Property box-sizing tidak mengubah kotak yang digambar browser — empat lapisnya tetap sama. Yang berubah adalah makna width dan height:

Nilai	Makna `width`	Lebar total elemen
`content-box` (default)	Hanya lapis content	`width` + padding + border
`border-box`	Content + padding + border	Persis `width`

Dengan content-box, setiap penambahan padding atau border memperbesar kotak. Dengan border-box, kotak tetap pada ukuran yang dideklarasikan dan lapis content-lah yang menyesuaikan.

Nama box-sizing bisa dibaca sebagai pertanyaan yang dijawabnya: ukuran kotak dihitung mulai dari sisi mana? Nilai content-box menjawab dari dalam — ukuran dimulai dari content, lalu lapis lain menambah lebarnya. Nilai border-box menjawab dari luar — ukuran sudah mencakup seluruh kotak sampai tepi luar border. Dua arah baca ini memudahkan kita memprediksi hasil tanpa menghafal.

Kotak yang Sama, Angka yang Berbeda #

css
.kartu-a,
.kartu-b {
  width: 240px;
  padding: 24px;
  border: 4px solid #1f6f54;
}

.kartu-a {
  box-sizing: content-box; /* total terlihat 296px */
}

.kartu-b {
  box-sizing: border-box;  /* total terlihat 240px */
}

Demo ini sengaja memakai reset="false" agar default browser murni yang terasa; kedua kotak menerima deklarasi yang sama persis:

Perhitungannya: .kartu-a berjumlah 240 + (24 × 2) + (4 × 2) = 296px dan content .kartu-b menyusut menjadi 184px agar padding dan border kebagian tempat — dan kalau keduanya disusun berdampingan dalam satu baris, perbedaan inilah yang menentukan posisi serta sisa ruang di sekitar mereka. Angka pada teks masing-masing kotak adalah janji yang bisa kita verifikasi lewat diagram box model di panel Computed DevTools seperti pada chapter sebelumnya.

Mengapa border-box Menjadi Konvensi #

Menghitung width + padding + border secara manual di setiap elemen melelahkan dan mudah meleset — apalagi saat padding diubah di kemudian hari. Dengan border-box, angka yang kita tulis adalah angka yang terlihat: width: 300px berarti kotak 300px, tanpa hitungan tambahan. Kesederhanaan mental ini membuat border-box diadopsi hampir semua proyek modern lewat satu aturan universal:

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

Aturan ini biasanya menjadi baris pembuka stylesheet dan sering disebut bagian dari reset atau normalize. Perlu diingat, box-sizing tidak diwariskan ke elemen anak, sehingga reset memakai selector universal untuk menjangkau semua elemen sekaligus. Course ini menerapkan aturan yang sama pada seluruh demonya: baseline shortcode demohtml sudah memuat box-sizing: border-box secara global, sehingga angka pada setiap demo dapat kita baca apa adanya.

Keuntungan lain terasa saat debugging. Bila sebuah elemen terlihat “terlalu besar”, dengan border-box kita cukup membaca satu angka width tanpa menjumlahkan lapisan. Kolom form yang diberi padding juga tidak meluap dari layoutnya, karena padding menyesuaikan ke dalam kotak, bukan menambah ukuran ke luar.

Kapan content-box Masih Berguna #

content-box tetap menjadi default browser karena beberapa situasi memang membutuhkannya:

Mengintegrasikan komponen pihak ketiga yang CSS-nya ditulis dengan asumsi content-box.
Menjaga lebar area konten tetap pasti, misalnya kolom teks width: 65ch yang harus tetap memuat 65 karakter meskipun padding-nya berubah.
Menyesuaikan gaya bawaan elemen form tertentu yang perhitungannya mengikuti content-box.

Di luar kasus-kasus seperti itu, border-box adalah pilihan yang aman untuk hampir semua elemen. Bukan kebetulan pula hampir semua reset modern memakainya sebagai titik awal.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
Elemen lebih lebar dari nilai `width`-nya	Browser memakai `content-box` (default); padding dan border ikut menambah	Pasang reset `box-sizing: border-box`, atau kurangi `width` dengan perhitungan manual
Konten tiba-tiba menyempit setelah reset dipasang	`width` lama ditulis dengan asumsi `content-box`; kini padding memakan ruang content	Tambah `width` untuk mengembalikan ruang content, atau hapus `width` yang tidak diperlukan
Reset tidak berpengaruh pada elemen tertentu	Aturan `box-sizing` lain dengan specificity lebih tinggi menimpanya	Periksa panel Styles di DevTools dan cari aturan `box-sizing` yang bersaing

Ringkasan #

Property box-sizing menentukan apakah width dan height hanya mengatur lapis content (content-box) atau sekaligus padding dan border (border-box). Nilai default browser adalah content-box, tetapi konvensi modern memakai reset universal box-sizing: border-box agar angka yang ditulis sama dengan angka yang terlihat — konvensi yang juga dipakai seluruh demo course ini. Dengan dasar ukuran yang kini pasti, kita siap membedah komponen kotak satu per satu, dimulai dari padding.