When you style a webpage, every HTML element is treated like a box.
This is called the Box Model — the foundation of layout and spacing in CSS.
What Is the CSS Box Model?
Think of every element as a box with 4 main parts:
Box Model Parts Explained
1. Content
-
The actual text, image, or element inside. Eg: width: 300px; height: 100px; color: blue;
2. Padding (Inner Space)
- Space inside the box, around the content
- Pushes content away from the border
Eg: padding: 20px;
Tip: Think of it like bubble wrap inside a box.
3. Border
-
The actual line around the content & padding
Eg: border: 2px solid black;
Tip: You can style borders with color, thickness, and style (solid, dashed, dotted)
4. Margin (Outer Space)
- The space outside the border
- Creates distance between this box and the next
Eg: margin: 30px;
Tip: Think of margin as the personal space of an element.
Example Code with All 4:
NEXT
Positioning Basics
CONTINUE (2)