The visual formatting model generally describes how elements in the document tree are processed for visual media such as computer screens.
It is the algorithm used for processing the documents for visual media. In it, zero or more boxes are generated as per the box model by all elements in the document tree.
The layout of these boxes is dependent on the following factors:
Note: The document tree contains the hierarchy of elements encoded in the source document. In addition, every element in the document tree has exactly one parent, except for the root element, which has none.
A rectangular box is generated by every element displayed on a web page. The next section describes the types of boxes that an element may generate.
To illustrate, paragraph element (<p>), headings (<h1> to <h6>), divisions (<div>) etc.
Typically, block-level elements may have other block-level elements and inline elements.
Block-level elements are formatted visually as blocks with a line break before and after the element.
These are those elements of the source document that do not form new content blocks; the content is distributed in lines. To illustrate, emphasized pieces of text within a paragraph (<em>), spans (<span>), strong element (<strong>) etc.
Typically, an inline element may only contain text and other inline elements.
Note: The inline-level elements only take up as much width as necessary and do not force line breaks.