Every HTML element on a webpage is treated as a rectangular box by the browser's layout engine.
1. The 4 Layers of the Box Model
2. The Universal box-sizing: border-box Rule
By default, box-sizing: content-box adds padding and border onto specified widths, breaking layouts. border-box fixes this:
⊞Code Example
/* Industry standard CSS Reset */
*, *::before, *::after {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 20px;
border: 2px solid #04AA6D;
margin: 15px;
/* Total width remains exactly 300px with border-box! */
}