CSS2: Visual formatting model – 1. Introduction

1. Introduction

The visual formatting model is how user agents (usually browsers) process the document tree (e.g. HTML) for visual media (e.g. your computer screen).

Each element (e.g. an H1 or div) generates boxes (see the earlier post on the “box model”).

The layout depends on:

  • box size and type (e.g. div or span)
  • positioning scheme (e.g. normal flow, float, absolute positioning)
  • relationship between elements in the document tree
  • external information (e.g. viewport (e.g. window), image size)

The model does NOT specify all aspects of formatting. E.g. it doesn’t specify a letter-spacing algorithm.

1.1 Viewport

The position of an element’s box are calculated relative to a rectangle called the containing block. This can be the window or viewing area on screen (called the “viewport”).

1.2 Containing blocks

Box positions and sizes are calculated using the edges of a rectangular box called a containing block (usually the viewport) and is anchored at the canvas origin.

See other posts for more on the Visual formatting model. E.g.

Controlling box generation; 

Positioning shemes; 

Normal flow; 


Absolute positioning; 

Relationships between ‘display’, ‘position’, and ‘float’; 

Comparison of normal flow, floats and absolute positioning; 

Layered presentation; 

Text direction

Plenty more here:


Leave a Reply

Your email address will not be published. Required fields are marked *