Normal flow examples

Reference: CSS 2.2 Visual formatting model

1. Block formatting context
   1. Width, height, padding, margin and border
   2. Anonymous block boxes
2. Inline formatting context
   1. Width, height, padding, margin and border
   2. Nested inline-level boxes
   3. Anonymous inline boxes
   4. Atomic inline-level boxes

See visual formatting model for a description of these properties.

Block formatting context

Here a forms a block formatting context:

Width, height, padding, margin and border

Width, height, padding, margin, and border apply in all directions to block-level elements. See:

Anonymous block boxes

Inline formatting context

Here a forms an inline formatting context:

Width, height, padding, margin and border

Width, height and vertical margins do not apply to inline-level elements. Border, padding and horizontal margins do apply. Here b has all properties applied, notice which are ignored:

Nested inline-level boxes

The contents of a regular inline-level box will participate in the same inline formatting context as its parent. E.g. here c is a grandchild of a but it still participates in a's inline formatting context:

Anonymous inline boxes

Any text directly inside a block container is wrapped in an anonymous inline box. E.g. here "Some text" and "some more text" are wrapped in anonymous inline boxes.

Atomic inline-level boxes

Notice here how text does not flow between lines for the display: inline-block element as it is an atomic inline-level box: