Box-Sizing: Border-Box vs Content-Box

Dalam CSS, properti box-sizing menentukan bagaimana lebar (width) dan tinggi (height) suatu elemen dihitung. Salah pilih bisa menyebabkan elemen "tumpah" dari kontainer atau merusak grid yang sudah Anda susun.

1. Content-Box (Nilai Default)

content-box adalah perilaku bawaan browser sejak awal web diciptakan.

• Logika: Ukuran width dan height hanya diterapkan pada isi (konten) saja.

• Efek Samping: Jika Anda menambah padding atau border, elemen tersebut akan membesar ke arah luar.

• Analogi: Seperti membeli sebuah kado (konten) berukuran 10cm, lalu Anda membungkusnya dengan busa (padding) dan kardus (border). Total ukuran paket Anda sekarang pasti lebih dari 10cm.

2. Border-Box (Standar Modern)

border-box adalah pendekatan yang lebih intuitif dan paling banyak digunakan dalam pengembangan web modern (termasuk framework seperti Bootstrap dan Tailwind).

• Logika: Ukuran width dan height sudah mencakup konten + padding + border.

• Efek Samping: Jika Anda menambah padding atau border, konten di dalamnya akan mengecil secara otomatis untuk mempertahankan ukuran total elemen.

• Analogi: Seperti sebuah ruangan berukuran 3x3 meter. Jika Anda menambah tebal tembok (border) atau memasang peredam suara (padding), ukuran ruangan dari luar tetap 3x3 meter, hanya saja ru ang gerak di dalam menjadi lebih sempit.

3. Tabel Perbandingan Cepat

Misalkan kita membuat elemen dengan: width: 200px, padding: 20px, dan border: 5px.

4. Tutorial: Eksperimen Langsung

Salin kode di bawah ini untuk melihat perbedaannya secara visual di browser Anda.

Kode HTML

<div class="container"> <div class="box content-box">Content-Boxdiv> <div class="box border-box">Border-Boxdiv>
div>

Kode CSS

.container { width: 500px; background: #eee; padding: 10px;
} .box { width: 100%; /* Kita ingin kotak memenuhi container */ padding: 30px; border: 10px solid #2c3e50; margin-bottom: 20px; color: white; font-weight: bold;
} .content-box { box-sizing: content-box; background-color: #e74c3c; /* Merah */ /* Kotak ini akan "jebol" keluar dari container karena total lebarnya 100% + 80px */
} .border-box { box-sizing: border-box; background-color: #27ae60; /* Hijau */ /* Kotak ini akan pas sempurna di dalam container */
}

Rekomendasi Profesional

Karena hampir semua layout modern menggunakan sistem grid atau persentase, sangat disarankan untuk memaksa semua elemen menggunakan border-box dengan bantuan Universal Selector di awal file CSS:

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

Dengan kode di atas, Anda tidak perlu lagi pusing menghitung sisa pixel setiap kali menambah padding pada elemen.