The CSS Box Model
Every normal CSS box consists conceptually of content, padding, border, and margin. With the default content-box sizing model, declared width applies to the content area only. Padding and borders are then added to the rendered dimensions.
This is why many projects use box-sizing: border-box, which makes declared width and height include padding and borders.
CSS Box Model
Border Box Reset
*,
*::before,
*::after {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 20px;
border: 4px solid #334155;
}💡 With
border-box, the total outer width remains 300px instead of becoming 348px.Key Takeaways
- The box model consists of content, padding, border, and margin.
border-boxmakes sizing easier to reason about.
Knowledge Check
With `box-sizing: border-box`, what does the declared width include?