Every element is a box

The browser draws every element as a rectangle, even a round avatar or a single word. That rectangle is built from four layers, each one wrapped around the one before: content, then padding, then border, then margin.

Knowing the layers is the key to spacing. Want breathing room inside a card, between its text and its edge? That's padding. Want the card to keep its distance from its neighbours? That's margin.

.card {
  padding: 16px;
  border: 2px solid #8a4b2a;
  margin: 24px;
}

• Content: the text or image itself.
• Padding: space inside the border. The background colour shows here.
• Border: the line around the padding.
• Margin: space outside the border that pushes other boxes away. Always transparent.