CSSKhác nhau ở width đang đo cái gì.
css
.a {
box-sizing: content-box; /* mặc định của CSS */
width: 300px; padding: 20px; border: 2px solid;
}
/* chiếm chỗ: 300 + 40 + 4 = 344px */
.b {
box-sizing: border-box;
width: 300px; padding: 20px; border: 2px solid;
}
/* chiếm chỗ: đúng 300px, content tự co còn 256px */content-box | border-box | |
|---|---|---|
width bao gồm | chỉ content | content + padding + border |
| Thêm padding | element phình ra | content co lại |
| Margin | không tính trong cả hai | không tính trong cả hai |
Dòng gần như mọi dự án đều có:
css
*, *::before, *::after { box-sizing: border-box; }Vì sao border-box dễ dùng hơn: khi làm layout bạn quan tâm ô này chiếm bao nhiêu chỗ, không phải "phần chữ bên trong rộng bao nhiêu". Với width: 50% + padding, content-box sẽ vỡ grid còn border-box thì không.
Lưu ý: border-box không tính margin. width: 100% cộng margin: 10px vẫn tràn khỏi cha — chỗ này phải dùng calc(100% - 20px) hoặc bỏ margin, dùng gap của flex/grid.