PHASE 5Beginner ~21 min· topic 1 of 8

Topic 5.1

The Box Model

In one line

Every element the browser draws is a rectangle made of four layers: the content, the padding around it, the border around that, and the margin outside it.

Think of it like this

A framed photo hanging on a wall. The photo is the content. The white card mount around the photo is the padding. The wooden frame is the border. The empty wall space you leave before the next frame is the margin. Make the mount wider and the whole framed picture grows, even though the photo stays the same size.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Box: The rectangle the browser makes for an element. Everything on a page is drawn as boxes.
Content area: The innermost part of the box, where the text or image sits.
Padding: Space inside the box between the content and the border. It shows the element's background.
Border: A line drawn around the padding. It can have a width, a style (solid, dashed…) and a colour.
Margin: Empty space outside the border that keeps other boxes away. It is always transparent.
Shorthand: One property that sets several others at once, like padding setting all four sides.
Containing block: The box an element measures its percentages against, usually its parent's content area.
Computed tab: The DevTools panel that shows the final values of every CSS property and the box model diagram.

Step by step

01Start with just content

A div with some text and a background colour. With no padding the text touches the edges of the coloured area: the box is exactly as big as its content (and as wide as its parent, because div is a block, see Topic 5.4).

style.csswhole filecss

.card {
  background: lightyellow;
  width: 200px;
}

02Add padding: breathing room inside

Padding pushes the content in from the edges. The background colour grows with it, because the background fills the padding too. The text area is still 200 pixels wide; the coloured box is now 240.

style.csswhole filecss

.card {
  background: lightyellow;
  width: 200px;
  padding: 20px;
}

03Add a border: the edge of the box

The border sits right outside the padding. A border needs a style to show up (solid, dashed, dotted…); the width and colour are optional. Now the box is 250 pixels wide from the outside edge of one border to the other.

style.csswhole filecss

.card {
  background: lightyellow;
  width: 200px;
  padding: 20px;
  border: 5px solid goldenrod;
}

04Add margin: space outside

Margin pushes neighbouring boxes away. It doesn't change the box's own size or colour; the page background shows through it. The space the card occupies in the layout is now 250 + 30 + 30 = 310 pixels across.

style.csswhole filecss

.card {
  background: lightyellow;
  width: 200px;
  padding: 20px;
  border: 5px solid goldenrod;
  margin: 30px;
}

Add margin: space outsidediagram

Rendering diagram…

05Read the four-value shorthand

Shorthands go clockwise from the top, like the hands of a clock starting at 12. Missing values copy the opposite side.

style.csswhole filecss

padding: 10px;                /* all four sides */
padding: 10px 20px;           /* top+bottom 10, left+right 20 */
padding: 10px 20px 30px;      /* top 10, left+right 20, bottom 30 */
padding: 10px 20px 30px 40px; /* top, right, bottom, left */

06Check it in DevTools

Right-click the card in the preview → Inspect, then open the Computed tab. The nested rectangles show margin 30, border 5, padding 20 and content 200 × (its height). Double-click any number in that diagram to change it live.

Try it yourself

1
Predict the new width
In the first example, change padding: 20px to padding: 10px 40px. Before you run it, work out offsetWidth on paper (border + left padding + content + right padding + border). Then run and check.
2
Margin has no colour
Add margin: 60px to .layer in the second example. Predict: does the green grow, or do more stripes show? Run it and see that margin only shows the wall behind.
3
Edit the box in DevTools
Inspect the card from the first example, open Computed, and double-click the padding number in the box diagram. Type 0 and press Enter. Watch the text touch the border, then reload to undo.

Code & diagrams

Measure the four layers New tab

JavaScript reads the sizes the browser really used. Change the padding or border and run again: the numbers follow the formula.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

content width (CSS width): 200px
clientWidth = content + padding: 240
offsetWidth = content + padding + border: 250
space taken with margins: 310

See each layer in colour New tab

Stripes = margin (transparent, the wall shows through), dashed brown = border, dark green ring = padding, light centre = content. Hover the box with DevTools open to compare with its colours.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Shorthand cheat sheetcss

/* margin and padding take 1 to 4 values, clockwise from the top */
margin: 8px;                 /* all sides */
margin: 8px 16px;            /* vertical | horizontal */
margin: 8px 16px 24px;       /* top | horizontal | bottom */
margin: 8px 16px 24px 32px;  /* top | right | bottom | left */

/* one side only */
padding-left: 12px;

/* percentages for padding/margin are % of the containing block's WIDTH */
padding-top: 10%;            /* 10% of the parent's width, not its height */

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Forget the border style

In the first example, change border: 5px solid goldenrod to border-width: 5px; border-color: goldenrod; (no style).

terminal

$ Console

── what you'll see ──

offsetWidth = content + padding + border: 240

Break #2

Expect percentage padding to follow the height

Give a 400px wide, 100px tall box padding-top: 50%.

terminal

$ the page shows

── what you'll see ──

The box gets 200px of top padding, much taller than half of 100px

Myth vs fact

Myth

width: 200px means the box is 200 pixels wide on screen.

Fact

With the default box-sizing: content-box it means the content is 200 pixels. Padding and border are added on top. Topic 5.2 shows how to change that.

Myth

Margin and padding are interchangeable ways to add space.

Fact

Padding is inside the border and shows the background; it makes clickable areas bigger. Margin is outside, transparent, can be negative, can be auto, and can collapse with other margins (Topic 5.3).

Myth

Inline elements like <span> have no box model.

Fact

They have padding, borders and margins too, but their vertical padding and margin don't push other lines away. Topic 5.4 — display explains why.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Strictly, the CSS box model has four edges (content, padding, border, margin edge) that define four boxes. Properties like background-clip, background-origin and box-sizing take those box names as values (content-box, padding-box, border-box).
▸
offsetWidth and clientWidth round to whole pixels; getBoundingClientRect().width gives the exact fractional size after transforms. Use the latter when you need precise geometry.
▸
Changing padding, border or margin changes layout: the browser must recompute the positions of this box and often its neighbours (a "reflow"). Animating them is expensive. For movement, animate transform instead; it skips layout.
▸
Modern CSS has logical versions of every side: padding-inline-start, margin-block, border-inline-end. They follow the writing direction (left-to-right, right-to-left, vertical), which matters for multilingual sites. You'll meet them in Topic 6.1 — Normal Flow and Writing Modes.

Remember this

1
In CSS every element generates a box: a rectangle the browser lays out and paints. The box model is the rule that says each box has four areas, from the inside out: the content area (where text and images go), the padding (space inside the box, between the content and the border), the border (a line around the padding, which can be zero wide) and the margin (space outside the border that pushes other boxes away).
2
Each layer has four sides you can set separately: padding-top, padding-right, padding-bottom, padding-left, and the same for margin and border-*-width. The shorthand padding: 10px 20px 30px 40px sets all four at once, going clockwise from the top: top, right, bottom, left. Fewer values repeat: padding: 10px is all four sides, padding: 10px 20px is top/bottom then left/right, and padding: 10px 20px 30px is top, left/right, bottom.
3
The four layers paint differently. The element's background (its colour or image) fills the content, the padding and the area under the border, but not the margin: the margin is always transparent and shows whatever is behind it. That's why padding makes a coloured button look bigger, while margin only adds empty space around it.
4
By default, width and height set the size of the content area only. Padding and border are added on top. So a box with width: 200px; padding: 20px; border: 5px solid takes up 250 pixels across (5 + 20 + 200 + 20 + 5), plus any margin. This default is called box-sizing: content-box, and you'll learn how to change it in Topic 5.2 — box-sizing.
5
Padding can never be negative, and percentages for padding and margin are always measured against the width of the containing block, even for padding-top and margin-bottom. That surprises everyone once, and it's the reason the old "padding-top: 56.25%" trick made 16:9 boxes before aspect-ratio existed (Topic 5.5).
6
The box model view in DevTools shows all of this for any element. Open DevTools, pick an element in the Elements panel, and look at the Computed tab: a set of nested rectangles shows the margin (orange), border (yellow), padding (green) and content (blue) with their real pixel sizes. Hovering an element in the page paints the same colours over it. When a gap or size surprises you, look here first.

Explain it without notes

Name the four parts of the CSS box model from the inside out and say what each is for.

A box has width: 300px; padding: 10px 20px; border: 2px solid; margin: 15px. How wide is it on screen, and how much horizontal space does it take in the layout?

Which parts of the box show the element's background, and why does it matter for buttons?

How do you find out where an unexpected gap comes from?

Practice

Make a .badge that is 120px wide, has 8px of padding on top and bottom and 16px on the sides, a 2px solid navy border and 12px margin on every side. Log its offsetWidth.

Give a box padding: 5px 10px 15px and log its computed padding-left. Explain the result.

Trade-offs

↔
Spacing with padding grows the element's background and click area but makes the element itself bigger; spacing with margin keeps the element's size but can collapse or leak out of parents. Many teams use padding inside components and gap (Phases 7 and 8) between them.

Done when you can

I can name the four layers of the box model in order.
I can calculate a box's on-screen width from its width, padding and border.
I can read the one- to four-value shorthand for padding and margin.
I know the background shows under padding and border but not margin.
I can find the box model diagram in DevTools and read it.

Command Palette

Words you'll meet

Step by step

01Start with just content

02Add padding: breathing room inside

03Add a border: the edge of the box

04Add margin: space outside

05Read the four-value shorthand

06Check it in DevTools

Try it yourself

Predict the new width

Margin has no colour

Edit the box in DevTools

Code & diagrams

Break it on purpose

Forget the border style

Expect percentage padding to follow the height

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can