The CSS Box Model
The Box Model controls how every element on a webpage is spaced.
Every box is made of:
- Content – the text or image inside the box
- Padding – space between content and border
- Border – the line around the box
- Margin – the space outside the border
Content Only
This is just content.
Padding Example
This box has padding. Notice the space inside the border area.
Border Example
This box has a border.
Margin Example
This box has a margin. Notice the space outside the border.
Padding + Border + Margin Combined
Content → Padding → Border → Margin
All layers visible!