Margin vs Padding di CSS: Perbedaan Keduanya Berdampingan

Perbedaannya dalam satu gambar

Padding ada di dalam border. Margin ada di luarnya. Kedua kotak di bawah punya isi yang sama dan nilai 24px yang sama, hanya property-nya yang berbeda. Warna abu-abu adalah container di belakangnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Dengan padding, 24px itu berwarna biru: ruang itu bagian dari kotak, berada di dalam border, dan kotaknya membesar. Dengan margin, 24px itu berwarna abu-abu: kotaknya tetap rapat di sekitar teks, dan ruang di luarnya mendorong tepi container menjauh.

Coba keduanya pada satu kotak

Geser kedua slider. Padding memperbesar kotak biru, sedangkan margin menjauhkan kotak dari tepi abu-abu tanpa mengubah kotaknya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Perhatikan baris ukurannya: nilainya berubah saat kamu menggeser slider padding dan tetap sama saat kamu menggeser slider margin.

Margin vs padding secara ringkas

Setiap property punya halamannya sendiri dengan semua detailnya: CSS padding dan CSS margin.

Mana yang dipakai

Ajukan satu pertanyaan: apakah ruang itu milik elemennya, atau berada di antara elemen?

• Ruang di sekitar label tombol, bagian dalam kartu, jarak antara teks input dan border-nya: padding. Padding ikut memakai background dan memperbesar area sasaran.
• Jarak antara dua paragraf, antar kartu, di sekitar sebuah bagian: margin, atau gap kalau elemen induknya adalah container flex atau grid.

Area klik adalah tempat pilihan ini paling berpengaruh. Kedua link di bawah memakan ruang yang sama di halaman, tetapi ruang link pertama adalah padding, sedangkan ruang link kedua adalah margin. Hanya link pertama yang mudah diklik:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

Garis putus-putus berwarna kuning adalah tepi elemen, yaitu area yang merespons klik dan ketukan. Margin di sekitar link kedua hanyalah ruang kosong yang tidak berfungsi apa-apa.

Jarak antar item: margin atau gap

Untuk deretan atau grid item, gap pada elemen induk flex atau grid biasanya lebih rapi daripada margin di setiap child: jaraknya hanya ada di antara item, tidak pernah sebelum item pertama atau setelah item terakhir, jadi tidak ada yang perlu dibatalkan.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Di sini container abu-abu memakai padding (ruang di dalamnya, abu-abu), item memakai padding (ruang di dalam setiap item, hijau), dan gap mengatur jarak di antara item.

Kesalahan yang sering terjadi

• Memakai margin untuk ruang yang seharusnya berwarna. Margin itu transparan. Kalau ruangnya harus menampilkan background, berarti itu padding.
• Memakai margin untuk memperbesar link. Area klik berakhir di border, jadi pakai padding.
• Mengira dua margin vertikal 20px menghasilkan 40px. Margin vertikal yang bersebelahan menyatu menjadi 20px. Padding tidak pernah menyatu.
• Mencoba padding: auto untuk menengahkan. Hanya margin yang menerima auto.
• Lupa bahwa padding memperbesar kotak. Tambahkan box-sizing: border-box agar width sudah termasuk padding.