box-sizing CSS: Bikin width Sesuai yang Kamu Maksud

Kamu pasang width: 300px pada sebuah kotak, tambahkan padding biar teksnya tidak terasa sempit, kasih border supaya lebih menonjol — eh, tiba-tiba kotaknya jadi lebih lebar dari 300px dan jebol keluar dari kolomnya. Padahal kamu tidak mengubah width-nya sama sekali. Jadi apa yang terjadi?

Jawabannya ada di box-sizing, salah satu property paling penting di CSS yang sering luput dari perhatian. Tugasnya cuma menjawab satu pertanyaan: ketika kamu menulis width: 300px, apakah angka 300 itu sudah termasuk padding dan border, atau belum? Begitu kamu menyetel property ini dengan benar, sekelompok masalah “kenapa tata letakku berantakan” langsung lenyap. Artikel ini membahas tuntas cara kerjanya, perbedaan dua nilainya, dan kenapa hampir semua stylesheet modern menyetelnya dengan cara yang sama di baris pertama.

Kalau kamu sudah membaca soal box model CSS, artikel ini adalah lanjutan yang pas — box model menjelaskan bahwa sebuah kotak punya content, padding, border, dan margin; nah, box-sizing menentukan lapisan mana saja yang sebenarnya diukur oleh width dan height kamu.

Kilas balik: empat lapisan sebuah kotak

Setiap elemen di CSS adalah kotak persegi yang tersusun dari empat lapisan, dari dalam ke luar:

1. Content — teks atau gambar itu sendiri, diukur lewat width dan height.
2. Padding — ruang di dalam kotak, antara content dan border.
3. Border — garis yang mengelilingi padding.
4. Margin — ruang di luar kotak, yang memisahkannya dari elemen tetangga.

Yang dijawab oleh box-sizing cuma soal tiga lapisan pertama. Tepatnya: saat browser menghitung berapa lebar ruang yang ditempati kotakmu, apakah width mengacu ke content saja, atau ke content plus padding plus border? Satu keputusan itulah inti dari semuanya.

content-box: nilai bawaan yang asli (dan bikin bingung)

Nilai bawaan dari box-sizing adalah content-box. Dengan nilai ini, width hanya menentukan ukuran area content saja. Padding dan border lalu ditambahkan di luar lebar itu, sehingga kotak yang muncul di layar jadi lebih besar daripada angka yang kamu ketik.

Inilah kejutan klasiknya:

.box {
  box-sizing: content-box;  /* nilai bawaan */
  width: 300px;
  padding: 20px;
  border: 5px solid #00838f;
}

Kamu menulis width: 300px, tapi kotak yang benar-benar muncul di layar ternyata lebih lebar dari itu. Browser menghitungnya begini:

300 (content) + 20 + 20 (padding kiri/kanan) + 5 + 5 (border kiri/kanan) = 350px total

Jadi kotak yang terlihat lebarnya 350px, bukan 300px. Logika yang sama juga berlaku secara vertikal untuk height. Angka width yang kamu setel cuma lapisan paling dalam; sisanya ditumpuk di sekelilingnya.

Ini bukan bug — memang begitulah spesifikasi CSS yang asli mendefinisikannya, dan sudah jadi nilai bawaan selama lebih dari dua dekade. Tapi diakui saja, perilakunya memang berlawanan dengan intuisi. Ketika kebanyakan orang menulis width: 300px, maksudnya “aku mau kotak ini selebar 300px”, bukan “aku mau content-nya 300px lalu tambahkan jumlah entah berapa di luarnya”. Ketidakcocokan antara niat dan perilaku inilah yang mendorong lahirnya border-box.

border-box: nilai yang sebenarnya kamu mau

Setel box-sizing: border-box, dan makna width berubah jadi jauh lebih masuk akal: width sekarang sudah termasuk padding dan border. Total kotak yang terlihat akan persis sama dengan angka yang kamu tulis, dan area content menyusut untuk memberi ruang bagi padding dan border di dalamnya.

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #00838f;
  /* Kotak ini PERSIS 300px lebarnya. Padding dan border muat di dalam. */
}

Padding sama, border sama — tapi sekarang kotaknya tepat 300px, titik. Browser mulai dari angka 300px milikmu lalu memotong padding dan border dari sisi dalam:

300 (total) − 20 − 20 (padding) − 5 − 5 (border) = 250px content

Jadi area content menjadi 250px, sementara kotak di layar tetap pada 300px yang kamu inginkan. Inilah yang hampir selalu kamu mau. Kamu setel sebuah lebar, kamu dapat lebar itu — selesai. Padding dan border hidup di dalam jatah, bukan malah membengkakkannya.

Melihat perbedaannya berdampingan

Dua nilai ini paling mudah dipahami kalau kamu membandingkan dua kotak yang identik. Keduanya punya width: 200px, padding: 20px, dan border 10px — satu-satunya bedanya cuma box-sizing:

.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #ccc;
  /* Lebar tampil: 200 + 40 + 20 = 260px */
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #00838f;
  /* Lebar tampil: persis 200px (area content jadi 140px) */
}

Versi content-box membengkak ke 260px; versi border-box tetap di 200px. Taruh dua kotak seperti itu bersebelahan dalam satu baris berlebar tetap, dan perbedaannya langsung kentara — yang satu muat, yang satu meluber keluar. Setelah melihatnya sekali, kamu tidak bakal mau balik ke content-box lagi.

Kenapa ini paling penting: width: 100% dengan padding

Tempat content-box paling bikin nyesek adalah ketika sebuah elemen seharusnya memenuhi container-nya sekaligus punya padding. Bayangkan kolom input selebar penuh, atau sebuah kartu yang membentang melintasi kolomnya:

.field {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
}

Dengan content-box bawaan, input ini jadi lebih lebar daripada container-nya. Angka 100% itu berarti “100% lebar induk untuk content-nya”, lalu padding 12px di tiap sisi ditambah border ditumpuk di luarnya — sehingga input-nya nyembul melewati tepi dan sering memunculkan scrollbar horizontal. Ini salah satu bug paling umum yang berbunyi “kok ada geseran menyamping misterius di tata letakku”.

Beralih ke border-box, dan masalahnya raib:

.field {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  /* Sekarang ia memenuhi container dengan pas, padding dan semuanya. */
}

Sekarang width: 100% benar-benar berarti “penuhi container”, dan padding diserap di dalam 100% itu, bukan ditempelkan di luarnya. Input-nya duduk rapi di dalam kolomnya, tanpa overflow, tanpa scrollbar liar. Skenario satu ini saja sudah cukup jadi alasan untuk memakai border-box di mana-mana.

Satu baris yang dipakai setiap proyek

Karena border-box jauh lebih intuitif, praktik standarnya adalah menerapkannya ke semua elemen tepat di bagian paling atas stylesheet, memakai universal selector:

* {
  box-sizing: border-box;
}

Tanda * mencocokkan setiap elemen di halaman, jadi satu aturan ini membuat seluruh dokumen memakai model ukuran yang masuk akal. Kamu akan menemukan versi baris ini di bagian atas hampir setiap file CSS, framework, dan reset modern.

Versi yang sedikit lebih tangguh juga mencakup pseudo-element dan memberi komponen jalan keluar yang rapi:

html {
  box-sizing: border-box;
}

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

Di sini kamu menyetel border-box sekali pada elemen <html>, lalu menyuruh setiap elemen (serta pseudo-element ::before / ::after) untuk mewarisi nilai itu. Keuntungannya adalah keluwesan: kalau ada satu komponen tertentu yang karena suatu alasan butuh content-box, kamu cukup menyetelnya di komponen itu dan anak-anaknya ikut mewarisi, ketimbang berkelahi dengan border-box yang sudah dipaku mati. Untuk kebanyakan proyek, * { box-sizing: border-box; } yang sederhana sudah lebih dari cukup — tapi tidak ada salahnya tahu pola inherit ini ada.

Bagaimana box-sizing memengaruhi height

Sejauh ini semua pembahasan soal width, tapi box-sizing berlaku ke height dengan cara yang persis sama. Dengan content-box, height cuma menentukan tinggi content dan padding/border ditambahkan di luarnya. Dengan border-box, height sudah termasuk padding dan border, jadi total tinggi kotak sama dengan angka yang kamu setel:

.banner {
  box-sizing: border-box;
  height: 80px;
  padding: 16px;
  border-top: 4px solid #00838f;
  /* Total tinggi tetap 80px — area content jadi 80 - 16 - 16 - 4 = 44px */
}

Ini praktis setiap kali kamu butuh elemen dengan tinggi yang persis — header tetap, baris tombol, avatar — sambil tetap memberinya padding di dalam. Dengan border-box, tinggi yang kamu tulis adalah tinggi yang kamu dapat, dan padding-nya tinggal memakan ruang yang tersedia buat content.

Lalu padding-box itu apa?

Mungkin kamu pernah tidak sengaja menemukan nilai ketiga, padding-box, di artikel-artikel lama. Dulu nilai ini membuat width mencakup padding tapi bukan border. Dalam praktiknya hampir tidak ada yang memakainya, dan nilai ini sudah dihapus dari browser — hari ini cuma ada content-box dan border-box. Jadi kamu cukup memikirkan dua nilai saja: si bawaan yang membingungkan (content-box) dan si nilai yang hampir selalu kamu mau (border-box).

Kapan kamu masih memakai content-box?

Setelah semua di atas, apakah masih ada alasan membiarkan sebuah elemen tetap di content-box? Jujur saja, jarang — tapi ada beberapa kasus yang muncul:

• Pengaturan ukuran gambar atau media tertentu, di mana kamu memang ingin width/height yang dideklarasikan menjadi ukuran content, lalu padding memperluas bingkai yang terlihat di sekelilingnya.
• Berintegrasi dengan widget pihak ketiga atau kode lama yang ditulis dengan asumsi perhitungan content-box, di mana mengubahnya justru merusak perhitungan internal mereka.

Ini kasus-kasus pinggiran. Untuk pekerjaan tata letakmu sendiri — kartu, input, grid, kolom, komponen — border-box adalah pilihan yang tepat di hampir setiap kesempatan. Pengecualian yang langka bisa keluar dari aturan secara lokal dengan menulis box-sizing: content-box cuma di elemen itu saja.

Menggabungkan semuanya: kartu yang berkelakuan baik

Berikut contoh kecil dan realistis yang menunjukkan bagaimana border-box menjaga sebuah kartu ber-padding dan ber-border tetap rapi di dalam kolom berlebar tetap. Kartu ini dimaksudkan selebar persis 320px, dengan padding dalam yang nyaman:

* {
  box-sizing: border-box;
}

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #d0d7de;
  border-radius: 12px;
}

<div class="card">
  <h3>ACY Partner Indonesia</h3>
  <p>Kartu yang tetap selebar persis 320px, padding dan border termasuk.</p>
</div>

Karena border-box aktif, kartu ini lebarnya tepat 320px di layar — padding 24px dan border 1px berada di dalam angka 320px itu, bukan di luarnya. Jejerkan beberapa kartu seperti ini ke dalam tata letak flex atau grid, dan semuanya tertata rapi tanpa overflow yang mengagetkan. Tanpa border-box, setiap kartu diam-diam jadi selebar 370px dan grid rapimu berantakan. (Untuk menyusun kartu ke dalam baris dan kolom, lihat Flexbox CSS dan Grid CSS.)

Penutup

box-sizing adalah property mungil dengan dampak besar terhadap seberapa mudah ditebaknya tata letakmu. Ini yang perlu kamu bawa pulang:

• box-sizing menentukan apakah width dan height sudah termasuk padding dan border. Ia tidak pernah memasukkan margin.
• content-box (bawaan lama) hanya mengukur content — padding dan border ditambahkan di luarnya, jadi kotak keluar lebih besar dari width yang kamu setel.
• border-box mengukur seluruh kotak — padding dan border muat di dalam width, jadi kotaknya selebar persis yang kamu minta.
• border-box membuat width: 100% dengan padding berperilaku benar dan membunuh bug scrollbar horizontal misterius.
• Terapkan ke mana-mana dengan * { box-sizing: border-box; } di atas stylesheet — atau pakai pola box-sizing: inherit untuk keluwesan keluar dari aturan.
• box-sizing memengaruhi height dengan cara yang sama seperti width.
• Nilai lama padding-box sudah hilang; tinggal content-box dan border-box.

Kuasai satu property ini, dan banyak rasa pusing tata letak CSS diam-diam menguap. Ukuran jadi intuitif, padding berhenti merusak width-mu, dan width: 100% akhirnya melakukan apa yang dijanjikan namanya. Dari sini, kamu sudah cukup siap membangun tata letak yang menjaga bentuknya — dan men-debug yang tidak.