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