CSS box-sizing: Vì sao thêm padding lại làm khung rộng hơn?

Một khung có width: 300px nhưng khi thêm padding lại rộng hơn dự kiến. Nếu chỉ giảm width để bù, lần đổi border tiếp theo có thể làm bố cục lệch trở lại. Cần xác định kích thước đang áp dụng cho phần nội dung hay toàn bộ hộp gồm nội dung, padding và border.

1. Hai cách tính kích thước

Theo tài liệu box-sizing của MDN, content-box tính width cho vùng nội dung; border-box tính cả padding và border trong kích thước khai báo. Margin không được tính vào width theo cả hai cách.

Xét một khối thông thường có width 300px, padding trái/phải 16px và border mỗi bên 2px, không bị flex, min-width hay quy tắc khác điều chỉnh. Với content-box, bề rộng đến mép border là 336px. Với border-box, bề rộng đó là 300px và vùng nội dung còn 264px.

2. Ví dụ để quan sát trong DevTools

<div class="demo content">content-box</div>
<div class="demo border">border-box</div>

.demo {
  width: 300px;
  padding: 16px;
  border: 2px solid #475569;
  margin-bottom: 12px;
}
.content { box-sizing: content-box; }
.border  { box-sizing: border-box; }

Đặt đoạn HTML và CSS trong trang thử nghiệm riêng, rồi chọn từng phần tử trong DevTools để xem box model. Các kích thước ở trên là kết quả tính toán mong đợi, không phải số đo của website production.

3. Vì sao width: 100% vẫn có thể tràn?

Trong bố cục khối đơn giản, một phần tử content-box có width: 100% đã dùng hết bề rộng nội dung của khối chứa. Padding và border thêm vào làm mép ngoài vượt phần đó. Đổi đúng phần tử sang border-box thường giải quyết trường hợp này.

Tuy nhiên, nếu phần tử còn margin ngang, chiều rộng tối thiểu lớn, nội dung dài không ngắt dòng hoặc quy tắc bố cục khác, border-box không tự sửa tất cả. Hãy kiểm tra nguyên nhân còn lại thay vì liên tục thêm overflow: hidden để che phần tràn.

4. Áp dụng có phạm vi trước khi đổi toàn trang

Với một component mới, có thể khai báo border-box trực tiếp trên những hộp cần kiểm soát. Với dự án cũ, kiểm tra stylesheet reset và computed style trước: thư viện có thể đã đặt quy tắc này hoặc một selector khác đang ghi đè.

Đổi box-sizing toàn trang có thể làm vùng nội dung của component cũ hẹp đi. Cần rà soát form, bảng, menu và hộp thoại thay vì coi đó là thay đổi chỉ mang tính tổ chức mã. Pseudo-element cũng cần được xét nếu chúng có kích thước riêng.

5. Checklist sau khi chỉnh

• Kiểm tra width thực tế, padding, border và margin trong DevTools.
• Thử màn hình hẹp, nội dung dài và nhãn có dấu tiếng Việt.
• Xác nhận nội dung không bị cắt, nút vẫn nhìn thấy và sử dụng được.
• Thử tăng cỡ chữ hoặc zoom để phát hiện chiều cao cố định quá chặt.
• Kiểm tra min-width và quy tắc flex/grid nếu vẫn tràn.
• Không áp dụng một sửa đổi toàn cục khi mới xác minh một component.

box-sizing giúp xác định rõ width đang đo phần nào của hộp. Khi hiểu phép tính này, bạn có thể sửa đúng nguyên nhân thay vì bù kích thước bằng các con số khó duy trì.