Box Model

Definisi

Box model adalah cara browser menghitung ruang sebuah elemen di halaman web. Setiap elemen dianggap sebagai kotak yang terdiri dari content, padding, border, dan margin.

Kenapa penting

Kalau box model tidak dipahami, layout biasanya terasa "aneh": lebar elemen membesar sendiri, jarak antar komponen tidak konsisten, atau card meluber keluar dari container. Banyak bug CSS sebenarnya bukan masalah warna atau font, tapi masalah perhitungan box.

Struktur Box

Satu elemen CSS dibangun dari empat lapisan utama:

• Content: isi elemen, misalnya teks, gambar, atau konten lain.
• Padding: ruang antara content dan border.
• Border: garis pembatas di sekeliling elemen.
• Margin: ruang di luar elemen untuk memisahkan elemen dari elemen lain.

Urutannya dari dalam ke luar adalah:

content → padding → border → margin

Cara Browser Menghitung Ukuran

Secara default, CSS memakai box-sizing: content-box.

Artinya:

• width hanya berlaku untuk content
• padding dan border ditambahkan di luar width
• margin selalu berada di luar semuanya

Rumus sederhananya:

text

total width = width + left padding + right padding + left border + right border

Kalau box-sizing: border-box dipakai, perhitungannya berubah:

• width sudah mencakup content + padding + border
• elemen jadi lebih mudah diprediksi
• layout responsif biasanya lebih nyaman dikelola

Contoh

css

.card {
  width: 300px;
  padding: 20px;
  border: 4px solid #ddd;
  margin: 16px;
}

Ilustrasi Visual

Diagram berikut menunjukkan susunan box model dari dalam ke luar.

• Mermaid dipakai untuk merangkum alur atau relasi secara ringkas.
• Excalidraw dipakai untuk menunjukkan bentuk dan ruang visualnya.

::preview

Kalau elemen ini masih memakai content-box, lebar visual totalnya lebih besar dari 300px karena padding dan border dihitung di luar width.

Kalau ingin ukuran lebih stabil, biasanya dipakai:

css

* {
  box-sizing: border-box;
}

Penjelasan

Saat box-sizing: border-box aktif, developer lebih mudah menebak ukuran elemen. Misalnya, kalau kamu set width: 300px, ukuran total elemen tetap terasa seperti 300px, bukan 300px ditambah padding dan border.

Itu sebabnya banyak project modern mengaktifkan border-box secara global di awal stylesheet. Tujuannya sederhana: mengurangi kejutan saat layout dibangun.

Kalau dilihat di diagram, ruang paling dalam adalah content. Setelah itu ada padding untuk memberi napas, border sebagai batas, lalu margin untuk jarak antar elemen.

Catatan Implementasi

• Pahami dulu perbedaan content-box dan border-box sebelum mengatur layout.
• Gunakan border-box sebagai default agar ukuran elemen lebih stabil.
• Jangan pakai margin untuk mengatur ruang internal elemen; margin adalah ruang luar.
• Gunakan padding untuk memberi napas di dalam komponen.
• Kalau layout terasa meluber, cek dulu lebar, padding, border, dan box-sizing.
• Hindari menebak-nebak spacing; hitung struktur kotaknya secara sadar.
• Kalau perlu menjelaskan struktur visual ke pembaca, pakai gambar kotak; kalau perlu menunjukkan urutan logika, pakai bagan.

Istilah

• Content box: area isi elemen.
• Padding box: content ditambah padding.
• Border box: content, padding, dan border.
• Margin box: seluruh kotak elemen termasuk margin.