Memahami Box Model

Pernah menulis width: 240px lalu elemen di halaman tampil lebih lebar dari 240 piksel? Kejadian itu bukan keanehan browser, melainkan konsekuensi dari cara browser menggambar elemen: setiap elemen HTML dirender sebagai kotak yang tersusun dari empat lapis, yaitu content, padding, border, dan margin. Susunan lapis inilah yang disebut box model, dan menjadi fondasi untuk mengatur jarak, ukuran, serta tata letak di CSS. Pada chapter ini kita membedah keempat lapis tersebut, menghitung ukuran total kotak, dan melihat kotak itu secara langsung lewat DevTools.

Empat Lapis Penyusun Kotak #

Bagaimana pun bentuk isinya — teks, gambar, atau elemen anak — browser selalu menggambar elemen sebagai persegi panjang berlapis. Konten berada di lapis paling dalam, lalu dibungkus padding, dibungkus border, dan yang terakhir dibungkus margin:

┌─────────────────────────────────────┐
│ margin                              │
│  ┌───────────────────────────────┐  │
│  │ border                        │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │ padding                 │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │ content           │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Empat lapis tersebut punya peran dan property masing-masing:

Dari keempatnya, hanya content dan border yang biasanya terlihat jelas. Padding tetap tampak karena background elemen menutupinya, sedangkan margin sepenuhnya transparan — keberadaannya baru terasa dari jarak yang muncul antara elemen yang berdekatan.

Mengapa pemahaman ini penting? Hampir semua masalah tata letak bertumpu pada kotak ini: jarak antar bagian halaman ditentukan margin dan padding, ukuran kartu ditentukan gabungan keempat lapisnya, dan kolom yang “meluap” dari wadahnya biasanya akibat lapisan yang tidak ikut dihitung.

Demo berikut melukis keempat lapis sebagai area berwarna, dilihat dari luar ke dalam — margin sesungguhnya transparan, diberi warna krem dan bingkai putus-putus agar batasnya ikut terlihat:

Dari demo ini, kalimat “setiap elemen adalah kotak berlapis” menjadi sesuatu yang dapat kita lihat, bukan sekadar teori.

Menghitung Ukuran Total Kotak #

Secara default, width dan height hanya mengatur lapis content. Padding dan border menumpuk di luarnya, sehingga ukuran total elemen menjadi lebih besar dari nilai yang kita tulis:

.kartu-produk {
  width: 240px;
  padding: 16px;
  border: 4px solid #1f6f54;
}

Demo berikut memakai reset="false" agar mode default content-box browser yang terasa, persis seperti contoh di atas:

Hitungannya:

240px (content) + 16px × 2 (padding kiri-kanan) + 4px × 2 (border kiri-kanan) = 280px

Rumus yang sama berlaku untuk tinggi: tambahkan padding dan border atas-bawah ke nilai height. Matematika kecil ini terasa sepele, tetapi inilah penyebab paling umum layout tiba-tiba meluap — kolom yang diberi padding terlalu besar mendorong lebar total melebihi wadahnya. Kebiasaan baiknya: setiap kali menetapkan lebar pasti, ikut hitung padding dan border-nya.

Melihat Kotak di DevTools #

Cara tercepat membuktikan keberadaan empat lapis ini adalah DevTools. Klik kanan sebuah elemen, pilih Inspect, lalu pada panel Elements buka tab Computed dan gulir ke diagram box model (di beberapa browser diagramnya ada pada tab Layout). Diagram berlapis di sana menampilkan angka nyata dari elemen yang sedang diperiksa:

margin             24
┌──────────────────────────────┐
│ border                    4  │
│  ┌────────────────────────┐  │
│  │ padding             16 │  │
│  │    content   240 × 54   │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

Angka pada diagram itu bisa diklik dua kali lalu diedit langsung — cara yang nyaman untuk mencoba-coba nilai padding atau margin tanpa menyentuh berkas CSS. Diagram ini juga menjadi alat utama kita saat mendebug masalah jarak pada bagian akhir section ini.

Ringkasan #

Setiap elemen HTML adalah kotak yang tersusun dari empat lapis: content di pusat, padding di dalamnya, border sebagai garis tepi, dan margin sebagai ruang transparan di luarnya. Dengan mode perhitungan default, ukuran total elemen adalah ukuran content ditambah dua kali padding dan dua kali border. Diagram box model di DevTools menampilkan angka keempat lapis tersebut secara langsung. Selanjutnya kita bedah komponen penyusunnya satu per satu, dimulai dari content, padding, border, dan margin sekaligus dalam satu contoh utuh.