Spacing and sizing

In plain English

Padding is space inside an element, between its content and its border, while margin is space outside the element that pushes neighbours away. The box-sizing: border-box rule makes width and height include padding and border, so a box stays the size you say. Width plus min-width and max-width control how an element stretches, and units change how sizing scales: px is fixed, rem follows the root font size, and em follows the current element font size.

Step by step

1. 1Add padding to a card and watch the content move away from its edges.
2. 2Add margin and watch the card push neighbouring elements away.
3. 3Set box-sizing: border-box and give the card a fixed width together with padding.
4. 4Add a max-width to keep the card from growing too wide on a big screen.

* {
  box-sizing: border-box;
}

.card {
  width: 100%;
  max-width: 40rem;
  padding: 1.5rem;
  margin: 2rem auto;
}

.card h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.badge {
  font-size: 0.75em;
  padding: 0.5em 1em;
}

Common mistakes

• Beginners often use margin when they mean padding and then wonder why the background colour does not reach the edge.
• A very common mistake is expecting width to mean the visible size when, by default, padding and border are added on top.
• Confusing rem and em is easy, and it leads to spacing that scales unpredictably as nesting changes.
• Forgetting a max-width lets a paragraph stretch across a huge monitor, which is hard to read.