Box Model CSS Adalah: Content, Padding, Border, dan Margin (Panduan Lengkap)

Box model CSS adalah konsep dasar bahwa setiap elemen HTML digambar oleh browser sebagai sebuah kotak berlapis dari dalam ke luar: content → padding → border → margin. Setiap div, p, tombol, gambar, bahkan satu kata pun yang kamu bungkus dengan span, semuanya diperlakukan browser sebagai kotak dengan empat lapisan ini. Begitu kamu benar-benar “melihat” keempat lapisan itu di setiap elemen, CSS berhenti terasa seperti tebak-tebakan dan mulai terasa masuk akal.

Box model adalah fondasi dari hampir semua yang kamu atur di CSS: seberapa besar sebuah elemen, seberapa jauh jaraknya dari elemen lain, di mana warnanya berhenti, dan kenapa width: 300px yang kamu tulis kadang berubah jadi 344px di layar. Artikel ini adalah panduan induk (hub) yang menyatukan semuanya, kita bahas keempat lapisan satu per satu, misteri box-sizing, cara mengintipnya di DevTools, sampai kesalahan-kesalahan yang paling sering menjebak pemula. Setiap lapisan juga punya artikel khususnya sendiri yang akan kami tautkan di sepanjang jalan.

Apa Itu Box Model? Empat Lapisan Setiap Elemen

Box model adalah cara browser menghitung ukuran dan ruang setiap elemen dengan membungkusnya dalam empat lapisan kotak: content (isi), padding (bantalan dalam), border (garis tepi), dan margin (jarak luar). Bayangkan sebuah lukisan yang dipajang: ada gambarnya (content), ada paspartu putih di sekelilingnya (padding), lalu bingkai kayu (border), dan terakhir jarak kosong ke lukisan sebelahnya di dinding (margin). Setiap elemen di web punya struktur berlapis yang sama persis.

Urutan lapisannya selalu tetap, dari pusat ke luar:

1. Content, area isi tempat teks, gambar, atau elemen anak dirender. Ukurannya diatur width dan height.
2. Padding, ruang transparan di dalam elemen, antara content dan border. Ikut terkena warna background.
3. Border, garis tepi yang mengelilingi content dan padding. Punya ketebalan, gaya, dan warna.
4. Margin, ruang kosong di luar border yang memisahkan elemen ini dari tetangganya.

Kunci memahami box model bukan menghafal definisi masing-masing, tapi menyadari bahwa keempatnya selalu ada di setiap elemen sekaligus, hanya saja nilainya bisa nol. Sebuah <p> tanpa CSS apa pun tetap punya content, padding (0), border (0), dan margin (bawaan browser). Ketika layout-mu berantakan, hampir selalu jawabannya ada di salah satu dari empat lapisan ini.

Empat Lapisan Satu per Satu

Sekarang kita bedah tiap lapisan. Tenang, tiap lapisan punya artikel mendalamnya sendiri, di sini kita fokus ke peran dan cara mengenalinya.

1. Content, Isi Elemen

Content adalah lapisan paling dalam: area tempat teks, gambar, atau elemen anak sebenarnya digambar. Lebar dan tingginya dikendalikan oleh properti width dan height. Kalau kamu menulis width: 300px, secara default itu adalah lebar area content-nya saja, belum termasuk padding dan border yang membungkusnya.

Content adalah titik nol tempat semua perhitungan ukuran dimulai. Justru karena itu ia sering jadi sumber kebingungan: angka width yang kamu tetapkan bukanlah lebar kotak yang terlihat di layar, melainkan hanya lebar isinya. Hubungan rumit antara width, height, dan lapisan lainnya kami bahas tuntas di artikel width dan height adalah. Warna atau gambar background elemen juga membentang dari content sampai ke tepi luar padding, detailnya ada di background-color.

2. Padding, Bantalan di Dalam

Padding adalah ruang di dalam elemen, antara content dan border. Fungsinya memberi “napas” supaya teks atau gambar tidak menempel ke tepi kotaknya. Ciri khasnya: padding ikut terkena warna background elemen, karena ia masih bagian dari elemen itu sendiri.

Padding hampir selalu jadi properti pertama yang kamu pakai saat mendandani tombol atau kartu, ia yang membuat konten terlihat lapang dan nyaman. Sintaks shorthand-nya (1 sampai 4 nilai, searah jarum jam), jebakan satuan persen, dan perilakunya pada elemen inline kami kupas lengkap di artikel khusus padding.

3. Border, Garis Tepi

Border adalah garis yang mengelilingi content dan padding, memisahkan bagian dalam elemen dari margin di luarnya. Border punya tiga bagian yang bisa diatur: ketebalan (border-width), gaya (border-style seperti solid, dashed, dotted), dan warna (border-color). Berbeda dari padding dan margin yang transparan, border benar-benar terlihat.

Border ikut menambah ukuran total elemen, sama seperti padding, border 2px di kiri dan kanan menambah 4px ke lebar elemen (kecuali kamu pakai border-box, dibahas nanti). Cara menulis border lengkap, shorthand-nya, dan pemakaian per sisi ada di artikel border. Kalau kamu ingin sudut kotaknya melengkung, itu tugas properti terpisah yang kami bahas di border-radius.

4. Margin, Jarak di Luar

Margin adalah ruang kosong di luar border yang memisahkan satu elemen dari elemen lain di sekitarnya. Berbeda dari padding yang ada di dalam, margin murni ruang eksternal, ia transparan, tidak pernah terkena background elemen, dan yang penting: tidak menambah ukuran elemen, hanya menggeser posisinya.

Nah, saatnya melihat keempat lapisan ini bergerak. Geser slider di bawah dan perhatikan bagaimana setiap lapisan tumbuh dan menyusut, sekaligus bagaimana box-sizing mengubah perhitungan lebarnya:

.kotak {
  box-sizing: content-box;
  width: 220px;
  padding: 24px;
  border: 6px solid #f97316;
  margin: 24px;
}

Sudah main-main sebentar? Perhatikan satu hal aneh: saat kamu memperbesar padding atau border dengan mode content-box, lebar elemen di layar ikut membengkak meski angka width-nya tidak kamu ubah sama sekali. Inilah bagian paling penting dari seluruh topik box model, dan penyebab bug layout nomor satu bagi pemula.

box-sizing: content-box vs border-box

Secara default, browser memakai box-sizing: content-box, artinya width dan height yang kamu tulis hanya mengatur ukuran content, sedangkan padding dan border ditambahkan di luarnya sehingga ukuran total elemen membengkak. Ini perilaku yang paling sering mengejutkan pemula: kamu menulis width: 300px, tapi browser menggambar kotak selebar 344px di layar.

Mari lihat hitungannya dengan content-box (default):

.kartu {
  box-sizing: content-box; /* default, biasanya tidak ditulis */
  width: 300px;
  padding: 20px;
  border: 2px solid #334155;
}
/* Lebar total di layar:
   300 (content) + 20 + 20 (padding) + 2 + 2 (border) = 344px */

Kamu menulis 300, browser menggambar 344. Sekarang bayangkan dua kolom yang masing-masing width: 50% lalu diberi padding: 16px. Dengan content-box, padding itu ditambahkan di luar 50%, sehingga total kedua kolom melebihi 100%, dan kolom kedua terlempar jatuh ke baris berikutnya. Layout meledak, dan pemula sering bingung berjam-jam mencari penyebabnya.

Solusinya cukup satu properti: box-sizing: border-box. Dengan nilai ini, width yang kamu tulis menjadi lebar total elemen, padding dan border dihitung ke dalam, bukan ditambahkan ke luar:

.kartu {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #334155;
}
/* Lebar total di layar: tetap 300px.
   Ruang content menyusut jadi 300 - 40 - 4 = 256px */

Jauh lebih intuitif, kan? Kamu bilang 300, kamu dapat 300, padding dan border mengambil ruang dari dalam. Karena perilaku ini jauh lebih mudah diprediksi, hampir semua proyek modern (termasuk framework seperti Tailwind dan hampir semua CSS reset) memasang border-box untuk semua elemen sejak baris pertama:

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

Kalau kamu ingin latihan menghitung ukuran kotak langkah demi langkah dengan editor langsung di browser, lesson box model interaktif di Hyper Sheets memandu kamu mengubah nilai dan melihat kotaknya berubah saat itu juga.

Cara Melihat Box Model di DevTools

Cara tercepat memahami box model sebuah elemen adalah membukanya langsung di DevTools browser, di sana box model digambar sebagai diagram berwarna yang bisa kamu klik. Kamu tidak perlu menebak-nebak berapa padding atau margin sebuah elemen; browser menunjukkannya persis.

Langkahnya di Chrome atau Edge:

1. Klik kanan elemen yang ingin kamu periksa, lalu pilih Inspect (atau tekan F12).
2. Pastikan elemennya terpilih di panel Elements.
3. Buka tab Computed di panel kanan (atau scroll ke bawah panel Styles).
4. Kamu akan melihat diagram box model, kotak berlapis dengan warna berbeda: biru untuk content, hijau untuk padding, kuning untuk border, dan oranye untuk margin.

Setiap angka di diagram itu bisa kamu klik dua kali untuk mengeditnya secara langsung dan melihat efeknya di halaman saat itu juga. Ini alat belajar paling ampuh: buka website apa pun, inspect tombol atau kartunya, dan bedah bagaimana developer-nya menyusun padding dan margin. Di tab Computed kamu juga bisa mengetik box-sizing di kotak filter untuk memastikan elemen itu memakai content-box atau border-box.

Kesalahan Umum Seputar Box Model

Kesalahan box model yang paling sering terjadi bukan soal sintaks, melainkan salah paham cara lapisan-lapisan itu dihitung, terutama lupa border-box dan bingung membedakan padding dengan margin. Berikut yang paling sering menjebak pemula.

1. Lupa border-box, Lebar Tak Sesuai

Kamu menulis width: 300px tapi elemennya digambar lebih lebar. Penyebabnya default content-box yang menambahkan padding dan border di luar width. Pasang * { box-sizing: border-box; } di awal, dan width yang kamu tulis akan selalu jadi lebar total yang kamu lihat.

2. Bingung Padding vs Margin

Keduanya sama-sama menciptakan “jarak”, tapi di sisi berlawanan dari border. Padding = jarak di dalam (antara content dan border, ikut kena background, memperbesar area klik). Margin = jarak di luar (mendorong elemen lain menjauh, selalu transparan). Aturan cepat: butuh ruang di dalam tombol? Padding. Butuh jarak antar kartu? Margin (atau gap). Pembahasan mendalamnya ada di artikel padding.

3. Mengira Margin Menambah Ukuran Elemen

Margin tidak pernah menambah ukuran elemen, ia hanya ruang eksternal. Kalau kamu memberi margin: 20px dan mengira kotak elemennya jadi lebih besar, kamu keliru: yang bertambah hanya ruang kosong di sekitarnya, sementara elemennya tetap seukuran semula.

4. Menghitung Lebar Tanpa Memperhitungkan Padding dan Border

Saat menyusun layout dua kolom atau grid manual, lupa bahwa (dengan content-box) padding dan border menambah lebar total adalah resep berantakan. Selalu ingat: total = content + 2×padding + 2×border, atau pasang border-box supaya kamu tidak perlu menghitung sama sekali.

FAQ Seputar Box Model

Box model CSS adalah apa?

Box model CSS adalah konsep bahwa setiap elemen HTML digambar browser sebagai kotak berlapis dari dalam ke luar: content (isi), padding (bantalan dalam), border (garis tepi), dan margin (jarak luar). Model ini menentukan seberapa besar sebuah elemen dan seberapa jauh jaraknya dari elemen lain.

Apa itu box model dan kenapa penting?

Box model adalah cara browser menghitung ukuran dan ruang setiap elemen lewat empat lapisannya. Penting karena hampir semua urusan layout, ukuran, jarak, warna latar, sampai kenapa elemen membengkak, bermuara ke box model. Menguasainya membuat CSS berhenti terasa seperti tebak-tebakan.

Apa bedanya content box dan border box?

content-box (default) membuat width hanya mengatur ukuran content, sehingga padding dan border ditambahkan di luarnya dan ukuran total membengkak. border-box membuat width menjadi lebar total elemen, padding dan border dihitung ke dalam. border-box jauh lebih intuitif dan dipakai hampir semua proyek modern.

Bagaimana urutan lapisan box model?

Dari dalam ke luar: content → padding → border → margin. Content adalah lapisan paling dalam (isi elemen), lalu padding (bantalan dalam), lalu border (garis tepi), dan margin di paling luar (jarak ke elemen lain). Urutan ini selalu tetap.

Bagaimana cara kerja box-sizing?

box-sizing menentukan apakah width dan height menghitung padding dan border ke dalam atau tidak. Dengan content-box, ukuran total = width + 2×padding + 2×border. Dengan border-box, width langsung menjadi ukuran total dan content-lah yang menyusut untuk memberi ruang bagi padding dan border.

Apakah margin menambah ukuran elemen?

Tidak. Margin adalah ruang kosong transparan di luar border, ia hanya menggeser posisi elemen dan menciptakan jarak ke tetangganya, tanpa menambah ukuran elemen itu sendiri. Ini berbeda dari padding dan border yang (pada content-box) menambah ukuran total.

Langkah Selanjutnya

Sekarang kamu sudah pegang gambaran utuhnya: box model adalah empat lapisan kotak, content, padding, border, margin, yang membungkus setiap elemen dari dalam ke luar, dan box-sizing: border-box adalah kunci supaya hitungan ukuranmu tetap waras. Dari sini, tinggal mendalami tiap lapisan sesuai kebutuhanmu: mulai dari padding dan border untuk ruang dan tepi, border-radius untuk sudut melengkung, width dan height untuk mengatur ukuran, sampai background-color untuk mewarnainya.

Cara tercepat membuat semua ini melekat adalah latihan langsung. Buka lesson box model interaktif di Hyper Sheets, ubah nilai content-padding-border-margin, dan lihat kotaknya berubah seketika. Setelah kotak-kotakmu rapi, gerbang berikutnya adalah mengatur posisi mereka di halaman, dan di situlah panduan Flexbox kami menunggumu. Selamat ngoding!