Margin trong CSS: viết tắt, margin auto và margin gộp

Margin là gì

Margin là khoảng trống bên ngoài viền của phần tử. Nó luôn trong suốt, và nhiệm vụ của nó là đẩy các phần tử khác ra xa. Trong ví dụ, phần tử chứa màu xám lộ ra qua margin quanh hộp xanh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

Dải xám không thuộc về hộp: nền của chính hộp dừng ở viền. Với khoảng trống cần mang nền của phần tử, hãy dùng padding.

Cách viết tắt margin

margin nhận từ một đến bốn giá trị, theo cùng thứ tự chiều kim đồng hồ như padding:

Mỗi cạnh cũng có thuộc tính riêng (margin-top, margin-right, margin-bottom, margin-left) và các phiên bản logic đi theo hướng chữ (margin-inline-start, margin-inline-end, margin-block, margin-inline).

Khác với padding, margin nhận auto và giá trị âm:

Căn giữa với margin: 0 auto

margin: 0 auto là cách kinh điển để căn giữa một khối theo chiều ngang. auto ở hai bên bảo trình duyệt chia đều khoảng trống còn dư. Phần tử cần có chiều rộng nhỏ hơn phần tử chứa, nếu không sẽ chẳng còn gì để chia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Margin auto không căn giữa theo chiều dọc trong luồng thông thường (margin auto theo chiều dọc thành 0) và không có tác dụng với phần tử inline. Để xem toàn cảnh các cách căn giữa, hãy đọc cách căn giữa một div.

Margin gộp

Khi hai margin dọc chạm nhau, chúng không cộng lại. Trình duyệt chỉ giữ margin lớn hơn. Ở đây hộp đầu có margin-bottom: 30px và hộp thứ hai có margin-top: 20px, nhưng khoảng cách giữa chúng là 30px chứ không phải 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

Việc gộp là có chủ đích: nó cho phép đoạn văn và tiêu đề tự mang khoảng cách của mình mà không bị nhân đôi ở chỗ chúng gặp nhau. Nhiều người bị bất ngờ ở trường hợp thứ hai, khi margin trên của phần tử con thoát ra khỏi phần tử cha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

Ở phần tử cha đầu tiên, margin 30px của phần tử con đã gộp xuyên qua cạnh trên của cha, nên nó đẩy cả phần tử cha xuống thay vì tạo khoảng xám bên trong. Bất kỳ cách nào sau đây cũng ngăn được:

• display: flow-root trên phần tử cha (khác với overflow: hidden, nó không cắt mất gì).
• Padding hoặc viền ở cạnh trên của phần tử cha.
• Phần tử cha là flex hoặc grid: margin của các mục flex và grid không bao giờ bị gộp.

Margin ngang không bao giờ bị gộp, margin của phần tử float hay được định vị tuyệt đối cũng vậy.

Margin âm

Margin âm kéo theo hướng ngược lại. Ở cạnh trên hoặc cạnh đầu, nó dịch chính phần tử; ở cạnh dưới hoặc cạnh cuối, nó kéo phần tử kế tiếp lại gần. Các hộp có thể chồng lên nhau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto trong flexbox

Trong một flex container, margin auto chiếm toàn bộ khoảng trống còn dư ở phía của nó. Đây là cách đơn giản nhất để đẩy một mục ra tận cuối hàng, và trong flexbox thì auto cũng hoạt động theo chiều dọc:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto đặt khoảng trống dư trước "Log in", nên mục này nằm ở cuối hàng cả trên trang trái sang phải lẫn trang phải sang trái.

Lỗi thường gặp

• margin: 0 auto trên phần tử không có chiều rộng. Khối vốn đã lấp đầy phần tử chứa; hãy đặt width hoặc max-width.
• margin: auto trên phần tử inline. Margin auto trên span, a hay img để inline đều bằng 0. Hãy chuyển nó thành display: block.
• Cộng hai margin dọc và mong ra tổng. Chúng gộp lại thành margin lớn hơn; hãy dùng gap trong flex hoặc grid, hoặc chỉ dùng margin theo một hướng một cách nhất quán.
• Margin của phần tử con đẩy cả phần tử cha. Đó là gộp giữa cha và con; hãy thêm display: flow-root cho phần tử cha.
• Dùng margin cho khoảng trống cần có nền. Margin trong suốt; hãy dùng padding.