CSS Visual Formatting

The visual formatting model typically explains how elements in the document tree are processed for visual media such as computer screen.

CSS Visual Formatting Model

The CSS visual formatting model is the algorithm that is used to process the documents for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model.

The layout of these boxes is depends on the following factors:

Type of Boxes Generated in CSS

Every element displayed on a web page generates a rectangular box. The following section describes the types of boxes that may be generated by an element.

Block-level Elements and Block Boxes

Block-level elements are those elements that are formatted visually as blocks (i.e. takes up the full width available), with a line break before and after the element. For example, paragraph element (< p>), headings (< h1> to < h6>), divisions (< div>) etc.

Generally, block-level elements may contain inline elements and other block-level elements.

Inline-level Elements and Inline Boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines. For example, emphasized pieces of text within a paragraph (< em>), spans (< span>), strong element (< strong>) etc.

Inline elements typically may only contain text and other inline elements.

You can change how an element will be displayed on a web page using the CSS display property. You will learn about the display property in next chapter.