Skip to lesson

Learning Labs / CSS Layout Lab

Make space make sense.

Understand the box model, Flexbox, and Grid through live layout experiments.

Learning path / 6 lessons0 / 6 completed

Lesson 01 / Build your understanding

The box model

Explain a rendered box's width and change its dimensions deliberately.

01 / Concept

Start with the idea.

Every element has a content box, padding around the content, a border, and a margin outside the border. They do different jobs even when the final result looks similar.

With content-box, width describes the content alone. With border-box, width includes padding and border. Margin still sits outside the rendered border box.

Read the reasoning

The page uses border-box by default, but this experiment explicitly sets the selected box-sizing. Measurements come from the real element, not a drawing pretending to lay out CSS.

Key terms
Content box
The space used by the element's content.
Border box
Content plus padding and border; the measured visible box.

02 / Predict

What do you expect?

A content-box has width 200px, padding 20px on each side, and a 4px border. What is its border-box width?
03 / Experiment → 04 / ExplainChange one thing. See why.
Live HTML + CSSDashed outline: available layout spaceMeasurements include fractional pixels
Content
Actual container width
0px
Border-box width
0.0px
Horizontal overflow
None

Why this layout happens

200 + 2 × 20 + 2 × 4 gives a border-box width of 0px. Margin adds 24px outside that box. The visible content region measures 0px.

Try the layout challenge.

Make the measured border-box width exactly 240px. More than one combination can work.

Inspect generated CSS
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 4px solid currentColor;
  margin: 12px;
}

05 / Practice

Put the idea to work.

A 240px border-box has 16px padding and a 4px border. How wide is its content?

06 / Recap

Take the lesson with you.

  • Content-box adds padding and border to width; border-box includes them.
  • Margin stays outside the border box.
  • Inspect actual dimensions when a box does not fit.

Check your prediction and solve a practice challenge to complete this lesson.

References & further reading

Keep your curiosity going.

More Learning Labs

Loading more Learning Labs…