HTML & CSS Practice 5/12

Padding, border, margin: the box around everything

Every element the browser draws is a box, and that box has four layers stacked from the inside out. The content is the text itself. Padding is space added around the content, still inside the box. The border is drawn around the padding. Margin is space outside the border that holds other elements away.

The part that trips people up is where the background stops. Padding is inside the border, so it gets painted with the element's background: add padding to a white card and you get more white card. Margin is outside the border, so it is never painted - whatever sits behind the element shows through instead. Space added inside the border joins the card; space added outside it belongs to the page.

The two cards below have neither. The text is pressed flat against the white edge, and the second card is jammed against the first.

Your task: give .card 16px of padding on all four sides, a 1px solid border, and 24px of margin below it. Watch which of the new space comes out white and which comes out grey - that tells you which side of the border you landed on.

You'll practice:

Adding padding, border and margin to one element and seeing what each does
Reading a background colour to tell padding apart from margin

<style>
  body { background: #eef1f5; font-family: system-ui, sans-serif; }

  .card {
    width: 240px;
    background: #ffffff;
  }

  .card h2, .card p { margin: 0; }
</style>

<div class="card">
  <h2>Standing desk</h2>
  <p>Barely used. Collection only.</p>
</div>

<div class="card">
  <h2>Office chair</h2>
  <p>One wheel squeaks. Free.</p>
</div>