Box Model (Mô hình hộp) trong CSS là gì?

Mọi phần tử trong tài liệu HTML đều được trình duyệt render thành một hộp chữ nhật (rectangular box). Chiều rộng, chiều cao, padding và margin xác định không gian được cấp phát trong và quanh phần tử. Sơ đồ sau minh họa khái niệm box model:

Nguồn: w3.org

Các thành phần của Box Model

Content (Nội dung)

Bao gồm dữ liệu thực tế dưới dạng văn bản, hình ảnh hoặc nội dung media khác. Thuộc tính width và height sửa đổi kích thước của hộp này.

Padding (Đệm)

Khoảng cách giữa mép ngoài của nội dung và đường viền (border) của nó gọi là padding. Hộp này có thể thay đổi kích thước bằng thuộc tính padding. Các thuộc tính riêng cho từng cạnh như padding-left, padding-bottom, v.v. giúp đạt được khoảng cách tùy chỉnh.

Border (Viền)

Khoảng cách giữa mép ngoài của padding và mép trong của margin định nghĩa border của một phần tử. Mặc định độ rộng được đặt là 0. Thuộc tính border được dùng để định nghĩa border của phần tử. Các cạnh riêng lẻ cũng có thể được định dạng.

Margin (Lề)

Khoảng cách giữa hộp của một phần tử và hộp của các phần tử xung quanh được định nghĩa là margin. Điều này tương tự như lề trang (page margin) - khoảng cách giữa mép trang và nội dung của nó. Nó trong suốt (transparent), mô phỏng các thuộc tính của padding, ngoại trừ việc nó dọn dẹp khu vực bên ngoài border của phần tử. Giống như padding, các cạnh riêng lẻ có thể được định nghĩa để có margin tùy chỉnh.

Ví dụ 1: Box Model với Flexbox

<!DOCTYPE html>
<html>
<head>
<style>
  body * { outline: solid; }
  #demo {
    margin: auto; width: 50%; padding: 1em; border: 1px outset;
    display: flex; box-shadow: inset 0 0 15px mediumvioletred;
    box-sizing: border-box;
  }
  #demo div { padding: 2em; box-shadow: inset 0 0 9px orange; }
</style>
</head>
<body>
  <div id="demo">
    <div></div> <div></div> <div></div> <div></div>
  </div>
</body>
</html>

Kết quả

Ví dụ 2: Box Model lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
  body * { outline: thin dotted; }
  #demo {
    margin: auto; width: 120px; height: 120px; padding: 1em; border: 1px outset;
    display: flex; box-shadow: inset 0 0 15px indianred;
  }
  #demo div { width: 40px; height: 40px; }
  div:nth-child(odd) { border: inset lightgreen; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; }
  div:nth-child(even) { border: inset lightblue; padding: 0.5em; }
</style>
</head>
<body>
  <div id="demo">
    <div></div> <div></div> <div></div>
  </div>
</body>
</html>

Kết quả

Tính toán kích thước thực tế:

Box-sizing quan trọng:

• box-sizing: content-box (mặc định) - width/height chỉ áp dụng cho content box
• box-sizing: border-box - width/height bao gồm content + padding + border (khuyên dùng cho layout)