Spacing is one of the most important parts of good design.
Margin and padding control how much space elements have around them.
Why Spacing Matters
Good spacing:
- Makes content easier to read
- Creates visual balance
- Makes designs look professional
Margin vs Padding
Margin controls space outside an element.
Padding controls space inside an element.
This adds space around the card.
Padding Example
Padding creates space between the content and the border.
This adds space inside the card.
Understanding the Box Model
Every element is a box made of:
- Content
- Padding
- Border
- Margin
Using All Sides
You can control spacing on each side.
This gives different spacing on each side.
Shortcut Property
You can write margin and padding in one line.
This makes CSS cleaner and shorter.
Auto Margin
Using margin auto helps center elements.
This centers the container horizontally.
Why This Matters for Jobs
Spacing is part of every layout.
Frontend developers use margin and padding daily.
Common Beginner Mistakes
- Confusing margin and padding
- Using too much space
- Forgetting the box model
Practice Task
Try this:
- Add margin between cards
- Add padding inside cards
- Center one element using margin auto
What You Will Learn Next
In the next lesson, you will learn best practices for using colors and units.