CSS box model là gì? `box-sizing: border-box` giải quyết gì?

Mỗi phần tử là một hộp gồm 4 lớp từ trong ra ngoài: content → padding → border → margin.

• Mặc định content-box: width/height chỉ tính phần content; padding và border cộng thêm vào kích thước hiển thị. Đặt width: 200px; padding: 20px; border: 2px → rộng thực tế 244px, dễ vỡ layout.
• border-box: width/height đã bao gồm padding + border; content tự co lại. Đặt width: 200px → luôn hiển thị đúng 200px.

Vì vậy dự án thường reset toàn cục:

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

Ghi chú: margin không bao giờ nằm trong width; margin dọc giữa các block có thể collapse (gộp) — dễ gây bất ngờ về khoảng cách.