The box model

What you'll learn

How every element is a box with content, padding, border and margin, and how to control each.

Why it matters

Almost every spacing problem ("why is there a gap here?") comes down to the box model. Once you see boxes, layout stops being mysterious.

Explanation

Every element is a rectangle made of four layers, from inside to outside:

1. Content: the text or image itself.
2. Padding: space inside the border, around the content.
3. Border: a line around the padding.
4. Margin: space outside the border, pushing other elements away.

By default width only sets the content size, so padding and border make the box bigger. Add box-sizing: border-box; so that width includes padding and border. Most sites set it for everything.

Example

Step-by-step walkthrough

1. * { box-sizing: border-box; } applies to every element so widths include padding and border.
2. .box is 200px wide in total, including its 20px padding and 4px border.
3. The background fills the content and padding, up to the border.
4. margin: 20px leaves space outside the border. Adjacent vertical margins overlap, so the gap between the two boxes is 20px, not 40px.

Try it yourself

Increase padding to 40px and watch the content move away from the border. Then change margin to see the boxes move apart.

Box modelHTML / CSS

Editable code<style> * { box-sizing: border-box; } .box { width: 200px; padding: 20px; border: 4px solid royalblue; margin: 20px; background: #e0e7ff; } </style> <div class="box">Box one</div> <div class="box">Box two</div>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Mixing up padding and margin. Padding is inside the border, margin is outside.
• Forgetting box-sizing: border-box and being surprised that the box is wider than width.
• Expecting vertical margins to add up. Neighbouring vertical margins collapse into the larger one.
• Using margin to centre text. Use text-align for text and margin: 0 auto for a block with a width.

Quick quiz

Summary

• Every element is a box: content, padding, border, margin.
• Padding is inside the border, margin is outside.
• Use box-sizing: border-box so sizes are predictable.

Next: laying elements out with flexbox.

.box {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

<style>
  * {
    box-sizing: border-box;
  }
  .box {
    width: 200px;
    padding: 20px;
    border: 4px solid royalblue;
    margin: 20px;
    background: #e0e7ff;
  }
</style>

<div class="box">Box one</div>
<div class="box">Box two</div>