Lesson 07 · Layout

Display and normal flow

Every element makes a box, and with no layout rules the browser places those boxes in normal flow. Watch an h1, two spans and a p land on a page: block boxes stack and fill the width, inline boxes share a line and ignore width. Then change one display value at a time (block, inline-block, none) and narrow the window, and see the same boxes flow into a new layout.

10 min8 steps5 questionsBeginner

Fig 7 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01With no CSS of your own, how does a p element lay out next to an h1 before it?

The browser's own stylesheet makes h1 and p block boxes. A block box starts a new line and, with width: auto, fills its container's width.

02You write span { width: 150px; } and the spans stay display: inline. What happens?

An inline box is as wide as its content; the width property does not apply to it. Change display to block or inline-block to make width work.

03Which display value lets two boxes sit side by side on one line and still take a width?

inline-block sits in a line like an inline box, but sizes itself like a block, so width: 150px works.

04h1 { display: none; } is added. What happens to the boxes after the h1?

display: none makes no box at all, so the h1 takes no space and the rest of the flow closes up. (visibility: hidden is the one that keeps the gap.)

05Two 150px inline-block spans sit on one line in a 344px body. The window narrows and the body becomes 264px. What happens?

150 + a space + 150 is about 304px, more than 264px. An inline-level box that no longer fits on the line wraps to the next one; its width stays 150px.

Key terms

Glossary

Box: The rectangle the browser makes for an element. Layout is deciding where the boxes go.
Normal flow: How the browser places boxes when you add no layout rules: in source order, by each box's display type.
display: The CSS property that sets a box's type, such as block, inline, inline-block or none. Its starting value is inline.
Block box: A box that starts on a new line and, with width: auto, fills the full width of its container. h1 and p are block by default.
Inline box: A box that sits on a line next to its neighbours and is as wide as its content. width does not apply to it. span is inline by default.
inline-block: A display value for a box that sits in a line like an inline box but takes a width and height like a block.
Containing block: The box an element is laid out inside, here the body's content area. A block's width: auto fills it.

Fine print

Notes and sources

The page drawing leaves out the margins browsers put above and below h1 and p, and draws every line the same height, so the order is easy to see. Widths in the labels are the real used widths; the two inline boxes are drawn wider than their words so the words fit.
Strictly, the two inline spans sit between two block boxes, so the browser wraps their line in an anonymous block box of its own (CSS 2.2, section 9.2.1.1). It changes nothing you can see here.
The line break between </span> and <span> collapses to one space. Its width depends on the font: about 4px at 16px in a Times-like font.
display has more values than these four, such as flex and grid, which later lessons cover. visibility: hidden is different from display: none: it hides the box but keeps its space.
Save the full page as index.html and the rule as style.css in the same folder, open index.html in a browser, and change the values on lines 2, 3 and 5 to see each layout.

Quiz Unlocks after the last step.