Q3: What is the difference between content-box and border-box sizing?
In content-box (browser default), declared width and height apply strictly to content. Padding and border add onto the width, expanding total rendered size (width + padding + border). In border-box, padding and border are included inside the defined width.
Global border-box Reset
*, *::before, *::after {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 20px;
border: 5px solid black;
/* Total width remains exactly 300px with border-box */
}💡 border-box prevents elements from breaking layouts when padding or borders are added.
Key Takeaways
content-boxexpands total element dimensions when padding or border is added.border-boxlocks overall dimensions, fitting padding and border inside width.
Knowledge Check
What is the total computed pixel width of an element with width: 100px, padding: 10px, border: 2px, and box-sizing: content-box?