meet it

adds space outside the box.

A margin is space outside the border. It pushes the box away from its neighbours. The background does not fill it, so a margin always looks empty.

Padding is room inside the box, margin is room outside it. Think of a picture on a wall: padding is the card round the picture, inside the frame, and margin is the wall round the frame.

Browsers add some margins of their own. Paragraphs and headings get some above and below, and body gets 8px all round. margin: 0 takes them away.

<div class="card">First card</div>
<div class="card">Second card</div>

.card {
  background-color: lavender;
  padding: 16px;
  margin: 24px;
}

Press show my page to see it here.

Change margin to 0 and watch the two cards touch.

guess first

Margin, but no padding. Where does the space go?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<p class="box">Hello</p>

.box {
  background-color: gold;
  margin: 30px;
  padding: 0;
}

your turn

Your turn. Space out the cards.

The two cards are touching. Give each card a margin between 10px and 40px so they stop touching.

the page you’re styling

<div class="card">Swimming on Monday</div>
<div class="card">Football on Friday</div>

your css

Your code

Press show my page to see it here.

the cards have space between themnot checked yet

fix it

The steps are stuck together. Can you fix it?

the page you’re styling

<div class="step">Mix the batter</div>
<div class="step">Pour it into the tin</div>
<div class="step">Bake for twenty minutes</div>

your css

Broken code to fix

Press show my page to see it here.

the steps have 20px of space between themnot checked yet

Each box is roomy inside, but the boxes still touch. Which kind of space is missing?
Padding is room inside the border. Space between boxes is margin.
Change padding to margin, then press run.

nailed it

you gave your boxes breathing space. :D

margin is space outside the border.
Padding is inside and coloured. Margin is outside and empty.
margin: 0 removes the margins the browser adds.

new words in your collection

margin

This lesson isn’t saved. A free account remembers every lesson you finish.

margin adds space outside the box.

Margin, but no padding. Where does the space go?

Your turn. Space out the cards.

The steps are stuck together. Can you fix it?

you gave your boxes breathing space. :D

adds space outside the box.