EasyConcept
What is the CSS box model?
- Technology:
- CSS
- Topics:
- CSS Layout
Quick answer
Every element is a box made of content, padding, border and margin. The default content-box size counts only the content; border-box includes padding and border in the width you set.
Detailed explanation
From the inside out: content (the text or image), padding (space inside the border), border, then margin (space outside the border). Adjacent vertical margins collapse into the larger of the two, which surprises people building stacked cards.
With box-sizing: content-box (the default), width: 200px is the content only, so padding and border make the element wider. box-sizing: border-box makes width include padding and border, which is why most teams set *, *::before, *::after { box-sizing: border-box; }.
Example
css
*, *::before, *::after { box-sizing: border-box; }
.card {
width: 320px; /* includes padding and border */
padding: 16px;
border: 1px solid #ddd;
margin-bottom: 16px;
}