Flow Layout: block 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

Block boxes

  1. Flow (expand/stack) on the block axis (direction lines wrap)
  2. Take their inline-size from external context (extrinsic)
  3. Take their block-size from internal content (intrinsic)
  4. Contribute padding/margins on both axis
  5. Adjacent margins collapse
  6. Can be explicitly sized (intrinsic or extrinsic)
  7. Intrinsic sizes: min-content, max-content, fit-content
  8. Box-sizing controls which box-edge to size (content or border)