Pendalaman box model

Setiap elemen pada halaman HTML dirender browser sebagai sebuah kotak sesuai konsep box model. Topik ini merinci empat lapisan pembentuk kotak tersebut, yaitu content, padding, border, dan margin, lengkap dengan properti yang mengendalikannya. Setelah membacanya, ukuran total sebuah elemen dapat dihitung sebelum halaman dibuka, dan shorthand padding serta margin dapat ditulis dengan urutan yang benar.

Empat lapisan kotak#

Box model menyusun isi elemen berlapis dari dalam ke luar. Lapisan terdalam adalah content, yaitu teks, gambar, atau elemen lain yang berada di dalam elemen tersebut. Menyusul ke luar, padding memberi jarak antara content dan garis tepi, border membentuk garis tepi itu sendiri, dan margin menambah jarak antara kotak dengan kotak di sekitarnya. Keempat lapisan ini berlaku penuh pada elemen block dan elemen yang diberi display: inline-block, sedangkan elemen inline menaati sebagian aturannya saja.

Tampilan visualnya perlu dicermati. Area padding ikut diberi warna latar elemen, sehingga kartu berlatar biru menampakkan area padding sebagai bagian biru itu juga. Sebaliknya, margin tidak pernah berlatar warna, sehingga area itu selalu menampilkan latar induknya. Ukuran keempat lapisan tidak harus simetris, karena setiap sisi dapat diberi nilainya sendiri melalui properti per sisi. Diagram berikut menampilkan keempat lapisan sebagai persegi bersarang, dari content yang paling dalam hingga margin yang paling luar.

Shorthand padding dan margin#

Keempat sisi padding dan margin dapat diatur satu per satu melalui properti seperti padding-top atau margin-left, tetapi cara itu membuat berkas stylesheet memanjang. Shorthand padding menerima satu sampai empat nilai sekaligus dengan urutan yang tetap, yaitu atas, kanan, bawah, lalu kiri, searah jarum jam. Shorthand margin mengikuti aturan yang sama persis. Apabila hanya satu nilai yang ditulis, keempat sisi memakai nilai tersebut, sedangkan dua nilai berarti pasangan atas-bawah lalu kanan-kiri, dan tiga nilai berarti atas, kanan-kiri, bawah.

Contoh berikut menata sebuah kartu profil dengan keempat lapisan sekaligus. Properti width mengatur area content, padding memberi ruang di dalam border, border membentuk garis tepi, dan margin mengatur jarak kartu dengan kotak lain. Kelima deklarasi itu menghasilkan kartu yang ukurannya dapat dihitung sebelum dirender.

.kartu-profil {
  width: 240px;
  padding: 16px 24px;
  border: 4px solid #1d4ed8;
  margin: 24px auto;
  background: #dbeafe;
}

Pada blok di atas, padding: 16px 24px berarti jarak atas dan bawah sebesar 16 piksel, sedangkan jarak kanan dan kiri sebesar 24 piksel. Nilai margin: 24px auto memberi jarak vertikal 24 piksel, lalu membagi sisa ruang horizontal secara merata sehingga kartu terpusat. Latar biru muda mencakup area padding, sehingga lebar kartu yang terlihat pasti melebihi nilai width-nya.

Ukuran total kotak pada content-box#

Model ukuran bawaan CSS adalah content-box. Pada model ini, width dan height hanya mengukur area content, sedangkan padding dan border ditambahkan di luarnya. Lebar total kotak menjadi jumlah width, dua kali padding horizontal, dan dua kali border horizontal, sebagaimana rumus berikut.

$\text{lebar terlihat} = \text{width} + 2 \times \text{padding} + 2 \times \text{border}$

Sebagai contoh, sebuah kotak dengan width: 200px, padding: 20px, dan border: 4px terlihat selebar $200 + (2 \times 20) + (2 \times 4) = 248$ piksel. Tingginya dihitung dengan cara yang sama apabila height, padding vertikal, dan border vertikalnya diketahui. Margin tidak termasuk ukuran kotak, tetapi tetap menempati ruang pada alur halaman, sehingga dua kotak 248 piksel yang masing-masing membawa margin 24 piksel membutuhkan lebar 544 piksel agar berdampingan tanpa menempel. Perhitungan semacam ini perlu diulang setiap kali padding atau border disesuaikan, dan jumlahnya bertambah seiring bertambahnya komponen.

Margin auto untuk pemusatan horizontal#

Nilai auto pada margin horizontal menyuruh browser membagi sisa ruang yang tersedia secara merata ke kiri dan ke kanan. Cara pemusatan ini hanya bekerja pada elemen block yang lebarnya ditentukan, misalnya width: 240px, karena elemen yang tidak memiliki lebar tetap akan mengisi seluruh lebar induk sehingga tidak ada sisa ruang. Pola margin: 0 auto menjadi cara klasik untuk memusatkan kartu, kontainer artikel, dan kolom konten.

Pada sumbu vertikal, nilai auto tidak memiliki efek yang sama. Menulis margin: auto 0 untuk memusatkan elemen secara vertikal tidak berpengaruh karena auto pada margin atas dan bawah dihitung sebagai nol pada alur normal. Pemusatan vertikal memerlukan mekanisme lain, misalnya display: flex dengan perataan pada elemen induknya.

Pemusatan horizontal menghasilkan tata letak yang fleksibel karena sisa ruang dihitung ulang setiap kali jendela berubah. Ketika ruang habis, misalnya pada jendela sempit, margin auto menjadi nol dan kartu menempel pada tepi, sehingga padding pada induknya perlu menyediakan jarak minimum. Kombinasi lebar tetap dan margin: 0 auto menjadi pola bawaan banyak halaman artikel.

Demo empat lapisan di browser#

Demo berikut menampilkan dua kartu dengan nilai padding, border, dan margin yang berbeda. Latar halaman berwarna abu-abu mewakili area di sekitar kotak, yaitu tempat margin terlihat sebagai jarak. Latar kartu yang berwarna menampilkan area padding, garis tebal di tepinya adalah border, dan kotak putih di dalamnya adalah content. Warna per lapisan sengaja dibuat kontras agar batas antar lapisan mudah ditunjuk.

Kartu pertama memakai padding 12 piksel, border 6 piksel, dan margin 24 piksel. Kartu kedua memakai padding 36 piksel, border 2 piksel, dan margin 8 piksel. Perbedaan paling mencolok ada pada area padding kartu kedua yang jauh lebih lebar, meskipun teks content kedua kartu sama-sama satu baris. Seluruh selisih yang terlihat berasal dari keempat lapisan tersebut, bukan dari perbedaan ukuran content-nya. Ubah nilai pada berkas index.css demo, lalu muat ulang untuk melihat dampaknya pada jarak dan ukuran kartu.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Empat lapisan box model</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Dua kartu dengan lapisan berbeda</h1>
  <div class="kartu-satu">
    <p class="isi">Kartu A</p>
  </div>
  <div class="kartu-dua">
    <p class="isi">Kartu B</p>
  </div>

<style>
/* Demo empat lapisan box model: margin, border, padding, dan content */

body {
  margin: 0;
  padding: 20px;
  background: #e2e8f0;   /* abu-abu: area di sekitar kotak, tempat margin terlihat */
  font-family: sans-serif;
}

h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.kartu-satu {
  width: 200px;
  background: #bfdbfe;        /* biru muda: area padding kartu pertama */
  border: 6px solid #1d4ed8;  /* garis biru tua: border */
  padding: 12px;
  margin: 24px;
}

.kartu-dua {
  width: 200px;
  background: #fecaca;        /* merah muda: area padding kartu kedua */
  border: 2px solid #b91c1c;
  padding: 36px;
  margin: 8px;
}

.isi {
  background: #ffffff;        /* putih: area content */
  margin: 0;
  padding: 8px;
}

</style>
<style>
/* Demo empat lapisan box model: margin, border, padding, dan content */

body {
  margin: 0;
  padding: 20px;
  background: #e2e8f0;   /* abu-abu: area di sekitar kotak, tempat margin terlihat */
  font-family: sans-serif;
}

h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.kartu-satu {
  width: 200px;
  background: #bfdbfe;        /* biru muda: area padding kartu pertama */
  border: 6px solid #1d4ed8;  /* garis biru tua: border */
  padding: 12px;
  margin: 24px;
}

.kartu-dua {
  width: 200px;
  background: #fecaca;        /* merah muda: area padding kartu kedua */
  border: 2px solid #b91c1c;
  padding: 36px;
  margin: 8px;
}

.isi {
  background: #ffffff;        /* putih: area content */
  margin: 0;
  padding: 8px;
}

</style></body>
</html>

Ringkasan#

• Setiap elemen tersusun atas empat lapisan, yaitu content, padding, border, dan margin, dan pada model content-box hanya content yang diukur oleh width serta height.
• Shorthand padding dan margin mengikuti urutan atas, kanan, bawah, kiri, dengan dua nilai berarti pasangan vertikal lalu horizontal.
• Ukuran total kotak content-box adalah width ditambah dua kali padding dan dua kali border, sedangkan margin menempati ruang tanpa dihitung sebagai ukuran.
• Margin auto memusatkan elemen secara horizontal bila lebarnya ditentukan, sedangkan auto pada margin vertikal bernilai nol.

Referensi#

• Box model — MDN Web Docs — Rujukan resmi susunan content, padding, border, dan margin beserta dampaknya pada ukuran elemen.
• The box model — web.dev — Materi kursus Learn CSS tentang box model beserta visualisasi keempat lapisannya.
• padding — MDN Web Docs — Dokumentasi properti padding, termasuk aturan shorthand satu sampai empat nilai.