Box model gồm những gì?

Mỗi element là một hộp gồm bốn lớp, từ trong ra ngoài: content → padding → border → margin.

.box {
  width: 200px;      /* mặc định: CHỈ tính phần content */
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}
/* chiều rộng chiếm chỗ thực tế = 200 + 20*2 + 5*2 = 250px
   cộng thêm 10px margin mỗi bên khi tính khoảng cách với element khác */

/* chuẩn hoá cho cả dự án — width là width thật */
*, *::before, *::after { box-sizing: border-box; }

.box { width: 200px; padding: 20px; border: 5px solid; }
/* giờ tổng chiều rộng đúng 200px, content tự co còn 150px */

Margin khác ba lớp còn lại ở ba điểm: nằm ngoài viền, luôn trong suốt (không nhận background), và gộp theo chiều dọc với margin liền kề.

Lưu ý: đặt width: 100% kèm padding trong content-box → element rộng hơn cha và tràn. Đây là lý do gần như mọi reset CSS đều mở đầu bằng box-sizing: border-box.

Mẹo debug: panel Computed trong DevTools vẽ sẵn sơ đồ box model với số đo từng lớp — nhanh hơn ngồi cộng tay.