Trong CSS, thuộc tính box-sizing xác định cách tính toán kích thước của một phần tử, bao gồm chiều rộng và chiều cao. Điều này rất quan trọng để quản lý bố cục và tạo ra các giao diện chính xác. Có ba giá trị chính cho thuộc tính box-sizing: content-box, border-box, và inherit. Dưới đây là so sánh chi tiết giữa các giá trị này.
content-boxbox-sizing. Kích thước của phần tử chỉ bao gồm nội dung (content), không tính đến padding và border.width) = Kích thước nội dung.height) = Kích thước nội dung..box {
box-sizing: content-box;
width: 200px;
padding: 20px; /* Padding sẽ được thêm vào */
border: 5px solid black; /* Border sẽ được thêm vào */
}border-boxwidth) = Kích thước nội dung + padding + border.height) = Kích thước nội dung + padding + border..box {
box-sizing: border-box;
width: 200px;
padding: 20px; /* Padding sẽ nằm trong 200px */
border: 5px solid black; /* Border sẽ nằm trong 200px */
}inheritbox-sizing từ phần tử cha. Điều này có thể hữu ích khi bạn muốn duy trì tính nhất quán trong một nhóm phần tử..parent {
box-sizing: border-box;
}
.child {
box-sizing: inherit; /* Kế thừa từ .parent */
}.child) sẽ có cùng giá trị box-sizing như phần tử cha (.parent).| Thuộc Tính | content-box | border-box | inherit |
|---|---|---|---|
| Mặc định | Có | Không | Kế thừa từ phần tử cha |
| Chiều rộng | Không bao gồm padding và border | Bao gồm padding và border | Kế thừa giá trị từ phần tử cha |
| Khi sử dụng | Khi bạn cần điều khiển kích thước nội dung độc lập với padding/border | Khi bạn muốn kích thước tổng thể chính xác, dễ quản lý | Khi cần duy trì tính nhất quán giữa các phần tử |
