Flow Layout: inline boxes

CSS takes a source document organized as a tree of elements (which can contain a mix of other elements and text nodes) and text nodes (which can contain text), and renders it onto a canvas such as your screen, a piece of paper, or an audio stream.

–CSS Display Module Level 4

Inline boxes

  1. Text is written in lines (part of a ‘line box’)
  2. We can add (and nest) elements in-line with the text
  3. Inline content flows (expands/stacks) on the inline axis
  4. Line length intrinsic from contents
  5. Line height determined by line-height
  6. Explicit box sizes don't apply
  7. Contribute border/padding/margins on the inline axis only
  8. Content fragments across new lines at container edge