Codelab 3: Predictable Layouts with border-box

Fix the box model's width surprise and build a clean card grid.

Step 1 of 7

The width surprise

Open your project from Codelab 2: cd ~/box-model-lab && code . Open index.html in the browser — press Ctrl+R if it's already open, or run xdg-open index.html.

In style.css, make sure .card has these properties: width: 300px, padding: 20px, and border: 2px solid #ccc.

Save the file and refresh the browser. Now here's the question: how wide is each card on screen? You set width to 300px, so it should be 300px... right?

Open DevTools (F12), hover over a card, and look at the dimensions shown. It says 344px wide! Where did the extra 44px come from?

Here's the math: • 300px (content width you set) • + 20px (left padding) • + 20px (right padding) • + 2px (left border) • + 2px (right border) • = 344px total width on screen

By default, the CSS width property only controls the content area. Padding and border are added on top of that width. This default behavior is called content-box.

Think of it this way: It's like measuring a picture frame. If someone says the frame is "300px wide," do they mean just the picture inside, or the whole thing including the wooden frame around it? CSS defaults to measuring just the picture (the content), which surprises almost everyone. You say 300px, but the box on screen is bigger — because the frame (border) and matting (padding) are extra.

Web Standard

This is not a bug — it's the original CSS specification from the 1990s. The width property was designed to control content width only. But it surprised so many developers that the CSS working group added the box-sizing property to fix it.

Learn more on MDN

CSSwidth CSSbox-sizing

THE CSS BOX MODEL

margin

border

padding

content

Content

Padding

Border

Margin