The CSS visual formatting model is the method used to process documents for visual media. In this method, every element within the document tree produces zero or more boxes in accordance with the box model.
The arrangement of these boxes depends on several factors:
Note: The document tree is the hierarchy of elements defined in the source document. Each element in the document tree has exactly one parent, except for the root element, which has none.
Every element displayed on a web page creates a rectangular box. The following section outlines the types of boxes that an element may generate.
Block-level elements are those elements formatted visually as blocks, taking up the full available width with a line break before and after the element. Examples include paragraph (<p>), headings (<h1> to <h6>), and divisions (<div>).
Typically, block-level elements can contain inline elements and other block-level elements.
Inline-level elements are those elements that do not create new blocks of content; instead, the content is distributed in lines. Examples include emphasized text within a paragraph (<em>), spans (<span>), and strong emphasis (<strong>).
Inline elements typically only contain text and other inline elements.
Note: Unlike block-level elements, an inline-level element only takes up the necessary width and does not force line breaks.
You can alter how an element appears on a web page using the CSS display property. You'll learn more about the display property in the next chapter.