Margin và padding trong CSS: khác nhau thế nào?

Khác biệt trong một hình

Padding nằm bên trong viền. Margin nằm bên ngoài viền. Hai hộp dưới đây có cùng nội dung và cùng giá trị 24px; chỉ khác thuộc tính. Màu xám là phần tử chứa phía sau.

<!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>

Với padding, 24px có màu xanh: nó là một phần của hộp, nằm trong viền, và hộp to ra. Với margin, 24px có màu xám: hộp vẫn ôm sát chữ, còn khoảng trống bên ngoài đẩy các cạnh của phần tử chứa ra xa.

Thử cả hai trên một hộp

Kéo hai thanh trượt. Padding làm hộp xanh to ra; margin đẩy hộp ra xa các cạnh xám mà không làm hộp thay đổi.

<!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>

Để ý dòng kích thước: nó thay đổi khi bạn kéo thanh padding và giữ nguyên khi bạn kéo thanh margin.

So sánh nhanh margin và padding

Mỗi thuộc tính có trang riêng với đầy đủ chi tiết: padding trong CSS và margin trong CSS.

Nên dùng cái nào

Chỉ cần tự hỏi một câu: khoảng trống này thuộc về phần tử, hay nằm giữa các phần tử?

• Chỗ trống quanh nhãn của nút, phần bên trong thẻ, khoảng cách giữa chữ trong ô nhập và viền của nó: padding. Nó mang nền và làm vùng bấm lớn hơn.
• Khoảng cách giữa hai đoạn văn, giữa các thẻ, quanh một phần trang: margin, hoặc gap khi phần tử cha là flex hay grid container.

Vùng bấm là nơi lựa chọn này quan trọng nhất. Hai liên kết dưới đây chiếm cùng một khoảng trên trang, nhưng khoảng trống của liên kết đầu là padding, còn của liên kết thứ hai là margin. Chỉ liên kết đầu là dễ bấm trúng:

<!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>

Đường viền nét đứt màu hổ phách là mép của phần tử, cũng là vùng phản hồi khi bấm chuột hay chạm. Margin quanh liên kết thứ hai chỉ là khoảng trống không làm gì cả.

Khoảng cách giữa các mục: margin hay gap

Với một hàng hoặc lưới các mục, gap trên phần tử cha flex hay grid thường gọn hơn margin trên từng phần tử con: nó chỉ nằm giữa các mục, không bao giờ ở trước mục đầu hay sau mục cuối, nên không có gì phải gỡ lại.

<!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>

Ở đây phần tử chứa màu xám dùng padding (khoảng trống bên trong nó, màu xám), các mục dùng padding (khoảng trống bên trong từng mục, màu xanh lá), còn gap lo khoảng cách giữa chúng.

Lỗi thường gặp

• Dùng margin cho khoảng trống cần có màu. Margin trong suốt. Nếu khoảng trống cần hiện nền thì đó là padding.
• Dùng margin để làm liên kết to hơn. Vùng bấm dừng ở viền; hãy dùng padding.
• Mong hai margin dọc 20px cộng lại thành 40px. Các margin dọc liền kề gộp lại còn 20px. Padding không bao giờ bị gộp.
• Thử padding: auto để căn giữa. Chỉ margin mới nhận auto.
• Quên rằng padding làm hộp to ra. Thêm box-sizing: border-box để width tính cả padding.