Box model và `box-sizing` khác nhau thế nào giữa content-box và border-box?

⚡ Trả lời nhanh

Box model gồm content, padding, border, margin. Với content-box (mặc định) width chỉ là phần content, padding và border cộng thêm vào. Với border-box, width đã bao gồm padding và border nên kích thước dễ dự đoán hơn.

.a { width: 200px; padding: 20px; border: 5px solid; }
/* content-box: tổng rộng = 200 + 40 + 10 = 250px */

.b { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid; }
/* border-box: tổng rộng = 200px, content còn 150px */

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