Margin, Padding, and Spacing

What you will learn

• Distinguish margin from padding in plain language.
• Understand the beginner box model idea.
• Recognize how spacing affects readability.
• Use margin and padding as different tools instead of mixing them together.

Why spacing feels hard at first

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.

Name the space

When you can name the space, you can control it more calmly.

What padding means

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.

Inside space

Padding protects the content from the edges of the element.

What margin means

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.

Outside space

Margin controls the room around the element.

A calm box model idea

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.

Simple map

Content inside, then padding, then border, then margin outside.

What to remember before lesson 7

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.

Take this forward

Padding is inside space. Margin is outside space.