Skip to content
WANCODE
BM

The Box Model: Padding, Border and Margin

15 minBeginnerHTML · CSS · JS

In this lesson

  • Name the four layers of every box: content, padding, border and margin
  • Use padding for space inside a box and margin for space between boxes
  • Calculate an element's real width, and use box-sizing: border-box to keep it simple

The big idea

To the browser, every element is a rectangle made of four layers. Once you can see those layers, spacing stops being guesswork.

Headings, paragraphs, images, buttons — the browser draws every one of them as a box. Each box has the same four layers, from the inside out:

content
The text or image itself. width and height set this part (by default).
padding
Space inside the box, between the content and the border. It shows the box's background colour.
border
A line around the padding. It has a width, a style (solid, dashed…) and a colour.
margin
Space outside the border that pushes other boxes away. Always transparent.
Drag the sliders and watch the width on screen change. Then tick border-box and drag them again.

Padding vs margin

Ask yourself one question: should this space have the box's background? If yes, it's padding (breathing room inside a card). If no, it's margin (a gap between two cards).

style.css
.card {
  padding: 24px;              /* all four sides */
  border: 2px solid #d9cfb8;  /* width, style, colour */
  margin-bottom: 24px;        /* gap below the card */
}

/* Shorthands go clockwise: top right bottom left */
.tag {
  padding: 4px 12px;          /* top+bottom 4px, left+right 12px */
  margin: 0 0 8px 0;          /* only a bottom margin */
}

Centre a block with auto margins

A block with a fixed width can be centred with margin-left: auto and margin-right: auto — or simply margin: 0 auto. The browser splits the leftover space equally on both sides.

The width maths trap

By default (box-sizing: content-box), width only sets the content. Padding and border are added on top. So this card is not 300px wide on screen:

content-box (default): 300 + 24 + 24 + 2 + 2 = 352px

CSS
.card {
  width: 300px;
  padding: 24px;
  border: 2px solid;
}
/* on screen: 352px wide */

border-box: exactly 300px, padding fits inside

CSS
.card {
  box-sizing: border-box;
  width: 300px;
  padding: 24px;
  border: 2px solid;
}
/* on screen: 300px wide */

With border-box, the width you write is the width you get. The content area shrinks to make room.

That's why almost every professional stylesheet starts with this small reset, so every element uses border-box:

CSS
*,
*::before,
*::after {
  box-sizing: border-box;
}

Vertical margins can collapse

When two blocks stack, the bottom margin of the first and the top margin of the second don't add up — the bigger one wins. 24px + 16px gives a 24px gap, not 40px. This is normal CSS behaviour (called margin collapsing), not a bug in your code.

In a real browser, right-click any element → Inspect. DevTools draws the exact same four-layer diagram with the real pixel values. It's the fastest way to debug spacing.

The menu cards are squashed. In style.css, update the .card rule:

1. Add at least 16px of padding on every side. 2. Add a visible border (for example 2px solid #d9cfb8). 3. Add a margin so there's at least 16px of space between the two cards.

Checks

  • Each card has at least 16px of padding on all sides
  • Each card has a visible border
  • There's at least 16px between the two cards

Check understanding

Q1

A box has width: 200px; padding: 20px; border: 2px solid; and the default content-box. How wide is it on screen?

Q2

Which layer sits outside the border and never shows the box's background colour?

Q3

With box-sizing: border-box; width: 200px; padding: 20px; (no border), how wide is the content area?

What you learned

  • Every element is a box: content → padding → border → margin.
  • Padding is space inside (shows the background); margin is space outside (transparent).
  • margin: 0 auto centres a block that has a width.
  • box-sizing: border-box makes width mean the full width on screen — use it everywhere.
Preview

Console output from your code appears here.

Step 1 of 3