Spacing — margin and padding

Space between boxes

• Margin is the space outside a box — the gap to its neighbours.
• margin: 30px; adds 30 pixels on all four sides, outside the border.
• Padding pushes the content in; margin pushes other boxes away.

One side at a time

• You can space just one side: margin-top, margin-right, margin-bottom, margin-left.
• The same works for padding: padding-left: 10px;, and so on.
• margin-bottom under a heading neatly separates it from the text.

<style>
  .tag {
    background-color: gold;
    padding: 6px;
    margin-right: 8px;
  }
</style>
<span class="tag">news</span>
<span class="tag">sport</span>

Common mistakes

• Padding is inside the border; margin is the space outside it.
• box-sizing: border-box makes the width include padding and border.

Now you try

• Margin is the gap between boxes; padding is the space inside one.
• Add margin around a box, then space below a heading.