Width Flows Downwards and Height Flows Back Up, Which Is Why the Browser Has to Visit Every Box Twice and Why One Careless Property Makes It Visit Them Forever

Last timeWhat Holds Up the First Paint

Layout computed by hand on a small tree, the two directions information travels, and the structural reason a parent cannot know its own height until its children are finished.

What a box is made of

Layout takes the tree, with every element now carrying a complete set of

values, and produces a number for the position and size of every box. It is

arithmetic, and on a small tree it can be done by hand in a couple of minutes.

Each box is four nested rectangles. The content at the centre, then padding

around it, then a border, then a margin outside that. Each has a value per

side.

FIG 1The outer width of a box

: total horizontal space the box occupies in its parent
: width of the content area
: padding on each side
: border on each side
: margin on each side

Written with equal values per side for readability; in general each side has its own number. The only real trap is which quantity a declared width sets, since the original rule makes it the content width and a widely used setting makes it the content plus padding plus border, so the same declaration produces two different boxes.

Widths decided on the way down

Now the structural fact that organises everything. The two dimensions behave

completely differently.

A block-level box with no declared width takes whatever its parent has

available, minus its own margins, borders and padding. The parent knows that

number already, because the parent got its own width from its parent, and so on

up to the window.

So widths can be assigned in a single sweep from the root downwards, before any

child has been examined at all.

FIG 2Widths assigned down a four-level tree, by hand

plaintext

window is 1000 wide

body          margin 20 each side
              content width = 1000 - 40 = 960

  main        padding 16 each side
              available 960
              content width = 960 - 32 = 928

    article   border 1 each side, padding 24 each side
              available 928
              content width = 928 - 2 - 48 = 878

      p       no margin, padding or border
              available 878
              content width = 878

every number above was computed without looking at
any child, working strictly downwards

Four levels and four subtractions. Note that the paragraph knows its width before anything is known about the text inside it, which is the precondition for everything in the next section, because you cannot know how many lines text occupies until you know how wide the lines are.

Heights discovered on the way up

Height does not work like that at all. A box with no declared height is exactly

as tall as its contents, and its contents are its children, whose heights are

as tall as their contents.

For text, the height is the number of lines times the line height, and the

number of lines depends on how many words fit on a line, which depends on the

width that was just assigned on the way down.

So the only order that works is: assign widths downwards, reach the leaves,

measure them, and sum heights back upwards.

The lesson stops here

1 more paragraph to go

You have read the opening. The rest of the argument, the problems that check whether it landed, and the lines worth keeping at the end all come with a plan.

The first lesson of every course in the library reads the whole way through, free, so you can see exactly what the rest of them are.

See the plan The contents

This is the reading half

Starting the course gives you your own copy of it. Every idea on every page has problems standing under it, marked with a reason rather than a tick, and any sentence you do not believe can be opened and argued with. None of that can happen on a page nobody owns.

The contents