The box model

Every box has layers

• CSS treats every element as a box.
• Content is your text or image. Padding is space inside, around the content.
• Border is a line around the padding. Margin is space outside, pushing other boxes away.

Padding and border

• padding: 20px; adds 20 pixels of space inside, on all four sides.
• border: 2px solid black; draws a line — its width, style, then colour.
• Padding makes a box feel roomy; a border makes it stand out.

<style>
  .card {
    background-color: #eef;
    padding: 16px;
    border: 2px solid #88a;
  }
</style>
<div class="card">A comfy padded card.</div>

Common mistakes

• The box model is content, then padding, then border, then margin (inside to outside).
• Padding adds space inside the border.

Now you try

• Padding is inside; the border sits around it.
• Add padding to a box, then a border.