Is the space inside or outside?
Tell CSS padding and margin apart with a tiny box experiment.
Follow the border.
A button or note can have breathing room inside its border and space around the outside. Those are different jobs. Padding separates content from the border; margin separates the box from surrounding boxes.
Picture a framed note. Padding is the blank paper between the words and the frame. Margin is the gap between that frame and the next object. The analogy is imperfect, but it gives you a place to look when spacing feels wrong.
Follow the border
Words → inside gap → border
Border → outside gap → next box
Change one property at a time.
Save the example below as spacing.html and open it in a browser. Increase padding from 16px to 32px, save, and refresh. The text gets farther from the border. Restore it, then increase margin from 16px to 40px.
The second change moves the bordered box away from its surroundings instead of adding room inside it. Real layouts have other rules, including how some vertical margins interact. This deliberately small example helps you isolate the basic distinction first.
<!doctype html><html lang="en"><meta charset="utf-8"><title>Spacing practice</title>
<p style="border:2px solid coral;padding:16px;margin:16px">A little room to read.</p>
<p>The next paragraph.</p></html>Make it yours.
- Save and open the HTML example.
- Increase padding, refresh, and observe the inside of the border.
- Restore padding and increase margin, then compare.
What changed when you tried it?
A little nudge
Use the border as your visual landmark.
What to look for
Padding changes the gap inside the coral border. Margin changes the space outside the bordered element.
Take it one small step further
Add a background color to the first paragraph and see which space receives it.
Inside the border is padding; outside is margin.
Read more: MDN · The box model ↗
No submission needed. This one is just for you.