Box Model CSS: Content, Padding, Border, Margin

Empat lapisan setiap kotak

Setiap elemen di halaman digambar sebagai persegi panjang yang terdiri dari empat lapisan, dari dalam ke luar:

1. Content: teks, gambar, atau elemen anak, ukurannya diatur oleh width dan height.
2. Padding: ruang di dalam kotak, di antara content dan border. Padding menampilkan background elemen.
3. Border: garis di sekeliling padding.
4. Margin: ruang di luar border yang mendorong kotak lain menjauh. Selalu transparan.

Di contoh ini setiap lapisan punya warna sendiri: content biru, padding hijau, border gelap, dan area kuning tua di sekeliling kotak yang merupakan margin (digambar oleh elemen pembungkus, karena margin sendiri transparan).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

Baris di bawah kotak diukur oleh browser: 160 + 20 + 20 + 10 + 10 = 220px. Margin menambah 24px lagi di setiap sisinya, tetapi margin berada di luar kotak, jadi tidak termasuk dalam 220 itu.

Hitungan lebar: content-box vs border-box

Secara default (box-sizing: content-box), width hanya mengatur content. Padding dan border ditambahkan di atasnya, jadi kotak akhirnya lebih lebar dari angka yang kamu tulis. Dengan box-sizing: border-box, width adalah seluruh kotak, dan content menyusut untuk memberi ruang bagi padding dan border.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

Reset border-box

Karena border-box membuat ukuran terjumlah dengan benar, hampir setiap stylesheet modern dimulai dengan aturan ini:

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

Hal ini paling penting saat memakai persentase. Dua kolom width: 50% dengan padding tidak muat dalam satu baris jika memakai content-box, karena masing-masing lebarnya 50% ditambah padding-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(Komentar HTML menghilangkan spasi di antara kolom inline-block, yang kalau tidak akan menambah beberapa piksel.)

Melihat box model di DevTools

Setiap browser menggambar box model untukmu. Klik kanan sebuah elemen, pilih Inspect, lalu buka tab Computed (Layout di Firefox): sebuah diagram menampilkan ukuran content di tengah, dikelilingi nilai padding, border, dan margin. Mengarahkan kursor ke elemen di panel Elements juga mewarnai halaman: content biru, padding hijau, margin oranye.

Kotak inline mengikuti aturan yang berbeda

Box model di atas menjelaskan kotak block seperti <div> dan <p>. Elemen inline seperti <span>, <a>, dan <strong> mengalir di dalam satu baris teks, dan memperlakukan ruang vertikal secara berbeda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block memberi elemen di dalam baris box model yang lengkap: width, height, padding, dan margin-nya semua memakan ruang. Lihat padding CSS dan margin CSS untuk penjelasan rinci setiap lapisan.

Kesalahan umum

• Menambahkan padding ke kotak berlebar tetap lalu heran kenapa kotaknya membesar. Dengan content-box, padding dan border ditambahkan ke width. Pakai border-box.
• Berharap margin ikut berwarna background. Margin selalu transparan; pakai padding untuk ruang yang berwarna.
• Mengatur height atau margin vertikal pada elemen inline. Tidak terjadi apa-apa; pakai display: inline-block atau block.
• Lupa memperhitungkan border. Border 1px pada elemen width: 100% membuatnya kelebihan 2px dengan content-box, yang bisa memunculkan scrollbar horizontal.
• Tertukar antara margin dan padding. Versi singkatnya: padding ada di dalam border, margin di luarnya. Halaman margin vs padding membandingkan keduanya berdampingan.