Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

15.1. Understanding the CSS Box Formatting Model

Although it is not overtly obvious, all elements in an XHTML document are contained within a box. That box has several properties—margins, padding, and borders—that can be configured to help distinguish the enclosed element from nearby elements.

To illustrate this point, take a look at Figure 15-1. This figure shows a document that isn't overtly boxy.

Figure 15-1. Figure 15-1

The same document is shown in Figure 15-2, but a thin border has been added to all elements, courtesy of the following style:

* { border: thin solid black; }

Note how all the XHTML elements in the document pick up the border in a rectangular box shape.

As previously mentioned in this part of the book, all elements have a margin, padding, and border property. These properties control the space around the element's contents and the elements around it. These properties stack around elements, as shown in Figure 15-3.

Figure 15-2. Figure 15-2

Figure 15-3. Figure 15-3

The element contents (text, image, and so on) are immediately surrounded by padding. The padding defines the distance between the element's contents and border.

The element's border (if any) is drawn ...