Learn the difference between margin and padding so spacing stops feeling random and starts feeling controllable.
15 minute lesson with 5 sections, 4 exercises, 5 checkpoint questions, and 1 homework submission.
Student mode saves sections, safe practice results, quiz progress, and completion status.
Spacing can feel confusing because beginners see empty room on the page without always knowing where that room comes from.
The good news is that CSS gives names to those different spaces, and margin and padding are two of the most important ones.
When you can name the space, you can control it more calmly.
Padding is space inside the element, between the content and the border.
If text feels too close to the box edge, padding is often the first thing to check.
Padding protects the content from the edges of the element.
Margin is space outside the element. It creates room between one element and the next.
If two cards are too close together, margin is often the better tool to inspect first.
Margin controls the room around the element.
A beginner box model view is this: content sits in the middle, padding surrounds the content, a border can wrap around that, and margin sits outside the element.
You do not need deep theory yet. You only need this simple map to make spacing choices feel less random.
Content inside, then padding, then border, then margin outside.
Spacing is easier when you separate inside space from outside space.
The next lesson shows how classes make styling reusable, which keeps spacing and other visual rules from being repeated everywhere by hand.
Padding is inside space. Margin is outside space.
Use the student player for saved sections, safe practice, quiz progress, and completion tracking.