Content, Padding, Border, dan Margin

Chapter sebelumnya memperkenalkan box model sebagai kotak berlapis. Kini kita turunkan menjadi kode nyata: satu blok deklarasi CSS yang menuliskan keempat komponennya sekaligus. Chapter ini juga menjawab pertanyaan yang paling sering muncul saat mengatur jarak — kapan sebaiknya kita memakai padding, dan kapan margin? Jawabannya berangkat dari satu pertimbangan sederhana: apakah ruang itu berada di dalam atau di luar kotak yang terlihat.

Empat Komponen dalam Satu Deklarasi #

.kartu-produk {
  /* content: isi inti elemen */
  width: 240px;
  height: 140px;

  /* padding: ruang di dalam border, tertutup background */
  padding: 16px;

  /* border: garis tepi elemen */
  border: 4px solid #1f6f54;

  /* margin: ruang transparan di luar border */
  margin: 24px;
}

Demo berikut menata kartu dengan deklarasi persis seperti di atas — area margin ditandai bingkai putus-putus:

Berikut ringkasan keempat komponennya:

Content: Pusat Kotak #

Content adalah tempat konten sesungguhnya digambar: teks paragraf, gambar, tombol, atau elemen anak lainnya. Property width dan height menetapkan ukuran lapis ini secara pasti. Tanpa keduanya, block element mengambil lebar penuh induknya secara otomatis, sementara tingginya mengikuti banyaknya konten. Nilai width atau height yang terlalu kecil untuk isinya membuat konten meluap dari kotaknya — masalah yang mendapat pembahasan tersendiri di bagian akhir section ini.

Padding: Ruang di Dalam #

Padding adalah jarak antara konten dan border. Dua sifatnya penting diingat. Pertama, padding ikut tertutup background elemen, sehingga warna kartu tampak mengembang sampai ke tepi border. Kedua, area padding dihitung sebagai bagian elemen: area klik dan hover mencakup padding-nya juga. Inilah alasan tombol yang nyaman diklik biasanya diberi padding lega, bukan sekadar huruf yang diperbesar.

Border: Garis Tepi #

Border menggambar garis di tepi elemen, berada di antara padding dan margin. Satu shorthand border merangkum tiga hal sekaligus: ketebalan (border-width), bentuk garis (border-style), dan warna (border-color). Detail lengkapnya — termasuk ragam gaya garis dan trik border transparan — menunggu di chapter Border.

Margin: Ruang di Luar #

Margin menciptakan jarak antara sebuah elemen dengan tetangganya. Ruang ini transparan: background elemen tidak meluas ke margin, dan area klik tidak mencakupnya. Margin juga satu-satunya komponen box model yang menerima nilai negatif — kemampuan yang kita manfaatkan untuk menarik elemen mendekat pada chapter Margin.

Padding atau Margin? #

Kaidah dasarnya satu kalimat: padding mengatur ruang di dalam kotak yang terlihat, margin mengatur jarak di antara kotak-kotak.

Bila ragu, tanyakan satu hal: apakah background sebaiknya menutupi ruang itu? Kalau ya, pakai padding; kalau tidak, pakai margin.

Menghitung Ruang yang Ditempati #

Keempat komponen berkontribusi pada dua angka yang berbeda: ukuran kotak yang terlihat, dan ruang yang ditempati elemen di dalam layout.

.kartu-ringkas {
  width: 200px;
  padding: 20px;
  border: 2px solid #1f6f54;
  margin: 16px;
}

Dengan mode perhitungan default (content-box), kotak yang terlihat selebar 200 + (20 × 2) + (2 × 2) = 244px. Tambahkan margin 16px di kiri dan kanan, dan elemen yang sama mendiami 244 + 32 = 276px ruang horizontal di dalam induknya. Dua angka ini sama pentingnya saat menyusun kolom: lebar kotak menentukan seberapa besar kartunya, sedangkan lebar ruang yang ditempati menentukan apakah deretan kartunya muat dalam satu baris.

Ringkasan #

Content, padding, border, dan margin masing-masing punya property sendiri dengan sifat yang berbeda: hanya padding yang tertutup background, hanya margin yang transparan dan bisa negatif. Aturan praktis memilihnya: padding untuk ruang di dalam kotak terlihat, margin untuk jarak antar kotak. Satu variabel besar masih menyimpan kejutan — siapa yang menentukan apakah width menghitung padding dan border atau tidak. Itulah materi chapter berikutnya, Content-Box dan Border-Box.