Understanding Visual Models

CSS works on a visual formatting model provided in the CSS specifications. This model helps define how web browsers process a document tree.

The visual model provides a means for every element in the tree to generate a box (or not). This is referred to as the box model. The means by which boxes are laid out within a page rely on this model (see Figure 2.6).

Figure 2.6: The box model

The box model in turn relies on a number of governing rules in order to display properly. Implementations of the box model have been different in major browsers, causing problems with consistency and forcing several workarounds for layout, which you’ll be reading about in Chapter 6.

Note 

 You can read the visual formatting model specifications for CSS2 here: www.w3.org/TR/REC-CSS2/visuren.html.

Box generation relies in part on the type of element the box will be generated for. There are two primary types of elements of note:

Block-Level Elements A block-level element is one that is visually formatted as a box. Block-level elements can contain both inline elements and other block-level elements. Typically, these elements start on a new line. Examples include: h1-h6, p, form, table, ol, ul.

Inline Elements An inline element is one that appears within the content, and may contain text or other inline elements. Usually there is no break after an inline element. Examples include: a, em, strong, img, input.

Note 

 A third type of element, known as a list-item element, is considered unique because it uses the li element, which maintains order by generating presentational markers such as bullets or numbers. The list-item element normally behaves like an inline element, which, unlike a block-level element, has no break.

A block-level element generates a principal box. This is a primary box that has the capacity to contain other boxes, or other block-level elements. I like to think of this as being like the old Chinese lacquered boxes that come nested inside one another. The largest box is the principal box, and the smaller boxes contained within it relate to other block-level children of the main parent element’s box.

With inline elements, boxes are laid out on the horizontal with what is referred to as a line box.

Every box is broken down into the following areas:

Content area (text, objects) A content area has a content edge that surrounds the elements actual contents.

Padding Padding edges surround a box’s padding.

Borders The border edge denotes a box’s border.

Margins The margin edge surrounds the box margin and is further defined by its specific edges: left, right, top, bottom.

If a margin has a width of 0, it becomes the same as the border edge. If the border edge has a width of 0, it becomes the same as the padding edge. If a padding edge has a width of 0, it becomes the same as the content edge.

Common ways to position CSS elements include:

Static A static box has normal flow based on its block or inline features.

Float A floating box shifts to the left or right.

Absolute position An absolute box is positioned specifically using demarcations along the x-y axis.

Relative position A relative box is positioned relative to where that box is expected to be within the flow of the document.

Note 

 As mentioned, problems with the box model exist because of different implementations in browsers. Owen Briggs writes a clear overview of this problem in his article “Content Placement Blues,” which includes additional resources: www.thenoodleincident.com/tutorials/box_lesson/content_placement/text.html .

You’ll get a deeper dose of what all this means to design in Chapter 6. For now, it’s important to understand the basics of the model so you can begin envisioning the way CSS really works.