CSS box model
Every element is laid out as a box made of content, padding, border, and margin.
What you will learn
- What each box layer represents
- How spacing changes the size of an element
Minimal example
.card { width: 20rem; padding: 1rem; border: 1px solid; margin: 2rem; }Padding adds space inside the border. Margin adds space outside it.
Common mistakes
- Margins are outside the border; padding is inside.
- Use
box-sizing: border-boxwhen the declared width should include padding and border.