Box model trong CSS: content, padding, border, margin

Bốn lớp của mọi hộp

Mọi phần tử trên trang được vẽ thành một hình chữ nhật gồm bốn lớp, từ trong ra ngoài:

1. Content: chữ, ảnh hoặc các phần tử con, có kích thước theo width và height.
2. Padding: khoảng trống bên trong hộp, giữa nội dung và đường viền. Vùng này hiện nền của phần tử.
3. Border: đường viền bao quanh padding.
4. Margin: khoảng trống bên ngoài đường viền, đẩy các hộp khác ra xa. Luôn trong suốt.

Trong ví dụ, mỗi lớp có màu riêng: nội dung màu xanh dương, padding màu xanh lá, đường viền tối màu, và vùng màu hổ phách quanh hộp chính là margin (được vẽ bằng một phần tử bọc, vì bản thân margin trong suốt).

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

Dòng bên dưới hộp do trình duyệt đo: 160 + 20 + 20 + 10 + 10 = 220px. Margin còn thêm 24px mỗi bên, nhưng nó nằm ngoài hộp nên không thuộc con số 220.

Cách tính chiều rộng: content-box và border-box

Theo mặc định (box-sizing: content-box), width chỉ đặt kích thước cho nội dung. Padding và border được cộng thêm bên ngoài, nên hộp cuối cùng rộng hơn con số bạn viết. Với box-sizing: border-box, width là toàn bộ hộp, và nội dung co lại để nhường chỗ cho padding và 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>

Đoạn reset border-box

Vì border-box giúp kích thước cộng lại hợp lý, hầu hết stylesheet hiện đại đều bắt đầu bằng quy tắc này:

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

Điều này quan trọng nhất khi dùng phần trăm. Hai cột width: 50% có padding sẽ không vừa trên một dòng với content-box, vì mỗi cột là 50% cộng thêm padding:

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

(Các chú thích HTML xóa khoảng trắng giữa hai cột inline-block, nếu không nó sẽ cộng thêm vài pixel.)

Xem box model trong DevTools

Trình duyệt nào cũng vẽ sẵn box model cho bạn. Nhấp chuột phải vào một phần tử, chọn Inspect và mở tab Computed (Layout trong Firefox): một sơ đồ hiện kích thước nội dung ở giữa, bao quanh là các giá trị padding, border và margin. Di chuột lên một phần tử trong bảng Elements cũng tô màu trang: nội dung xanh dương, padding xanh lá, margin cam.

Hộp inline theo quy tắc khác

Box model ở trên mô tả các hộp block như <div> và <p>. Phần tử inline như <span>, <a> và <strong> nằm gọn trong một dòng chữ, và xử lý khoảng trống theo chiều dọc khác hẳn:

<!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 cho phần tử nằm trong dòng chữ đầy đủ box model: width, height, padding và margin đều chiếm chỗ. Xem chi tiết từng lớp ở padding trong CSS và margin trong CSS.

Lỗi thường gặp

• Thêm padding cho hộp có chiều rộng cố định rồi thắc mắc vì sao nó to ra. Với content-box, padding và border được cộng vào width. Hãy dùng border-box.
• Mong margin có màu nền. Margin luôn trong suốt; dùng padding nếu cần khoảng trống có màu.
• Đặt height hoặc margin dọc cho phần tử inline. Không có gì xảy ra; hãy dùng display: inline-block hoặc block.
• Quên tính border. Viền 1px trên phần tử width: 100% làm nó rộng thừa 2px với content-box, có thể sinh ra thanh cuộn ngang.
• Nhầm margin với padding. Nói ngắn gọn: padding ở bên trong đường viền, margin ở bên ngoài. Trang margin và padding đặt hai thuộc tính cạnh nhau để so sánh.