Section III.2. Understanding the Box Model

III.2. Understanding the Box Model

CSS treats each element in a document as a box within the rendered page (speaking here of documents to be displayed visually in a browser). A box can be presented in one of two basic ways: block or inline.

The default behavior of a typical block-level element is that it begins at the starting margin of one line and ends in a way that forces the next bit of content to appear on a new line following the block. For example, the standard block-level behavior of a heading element (H1, H2, etc.) causes the element to start on its own line and forces a subsequent element to start on the line below the heading.

In contrast, an inline element does not form its own block (although it still has a box), and therefore begins its rendering within the current line of its containing element. For example, inserting an em element into the middle of a p element (to indicate emphasis of some words) keeps the emphasized words within the natural flow of surrounding words in the paragraph.

Every box has provisions for the drawing of a border, a margin, and padding around the element's content. Those features are controlled by CSS properties. In fact, those three termsborder, margin, and paddingaccount for about one-fourth of all CSS2 style sheet property names.

III.2.1. Box Pieces

To help you visualize the relationships among the components of an element's box, Figure III-2 shows a schematic diagram of an element box (imagine it's a paragraph, if that helps), where the margin, border, and padding are indicated in relation to the content. The width and height of the content do not change, even when extra stuff is tacked on outside of the content.^[*] Each of the surrounding featurespadding, borders, and marginscan occupy space based on its corresponding dimensions. The width and height of the entire box is the sum of the element content, plus padding, borders, and margins. If you don't assign any values to those features, their dimensions are usually zero and, therefore, they contribute nothing to the dimensions of the box. In other words, without any padding, borders, or margins, the content and box dimensions are generally identical (although some browsers build in margins for a few elements, such as body). With style sheets, you can assign values to your choice of edges (top, right, bottom, or left) for any feature.

^[*] This is the way IE 6 and later for Windows work when in standards-compatible mode (see the <!DOCTYPE> element discussion in Chapter 1 of Dynamic HTML: The Definitive Reference, Third Edition). In backwards-compatible (quirks) mode and earlier versions, the browser includes the border and padding in element height and width calculations.

Figure III-2. Schematic diagram of a CSS block-level element

All margin space is transparent. Thus, any colors or images that exist in the next outer containing box show through the margin space. Borders are opaque and always have a color associated with them. Padding space is also transparent, so you cannot set the padding to any color; the background color or image of the content, however, bleeds into the padding space. Thus, this space "pads" the content to give some extra breathing room between the content and any border and/or margin defined for the element.

Some style sheet properties provide a one-statement shortcut for applying independent values to each of the four edges of the margin, border, or padding. For example, you can set the top and bottom border widths to one size and apply a different size to the left and right sides of the same border. When such shortcuts are available (see the border, margin, and padding style properties in Chapter 4 of Dynamic HTML, Third Edition), the values are applied in the same order: clockwise from the toptop, right, bottom, left.

III.2.2. Box Positioning

While the content dimensions remain the same regardless of the dimensions assigned to various box features, the size of the box expands when you assign padding, borders, and margins to the element. As you will see in Online Section V, the "thing" that gets positioned within the various coordinate planes is the box.

It is important to understand the difference between a piece of content and its containing box, especially if you start nesting positioned elements or need to rely on extremely accurate locations of elements on the page. To counteract small margins or padding assigned to elements by default in some browsers, many designers as a matter of routine set these properties initially to zero, and then adjust them as needed for their design. Nesting multiple block-level elements inside each other offers a whole range of possible visual effects, so page designers have much to experiment with while developing unique looks.