Understanding the Box Model

Since every element you create in your markup produces a box on the page, an (X)HTML page is actually an arrangement of boxes.

By default, the border of each element box isn't visible and the background of the box is transparent, so I understand if you're wondering where all the boxes are. With CSS, it's easy to turn on the borders and color the backgrounds of the boxes. Then you can start to see your page structure in a whole new light.

To learn more about the box model see www.w3.org/TR/REC-CSS2/box.html.

In Figure 4.1, you can see two paragraphs of text, each of which is styled with borders on and a light gray background, like this

To do more than simply use the XHTML layout presented by the browser, you must understand how to control the appearance and placement of element boxes. Step one is to understand the box model (Figure 4.2) This box model diagram shows the properties that make up each box.

Note that the exact widths of thin, medium, and thick are not actually defined in the CSS specifications, and so these widths may vary between browsers. The line styles, with the exception of solid, which is a simple unbroken line, also are not explicitly defined in the CSS specifications; a dashed line may have different dash and space lengths from browser to browser.

A simple way to think about these properties is that margins push outward from the border and padding pushes inward from the border.

Because a box has four sides, properties associated with margin, border, and padding each have four settings for the top, right, bottom, and left of the box.

The Box Border

Width. This includes thin, medium, thick, or any unit (ems, px, %, and so on).

Style. This includes none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.

You can style the border properties for all four sides of a box at once like this

or you can use shorthand (see "Shorthand Styling" on the next page) to specify four different styles for the four sides at once

However, it's fairly unlikely that you will want to specify a different style for each side because four different types of border on the same box looks, well, bad. On the other hand, it is common to specify the same color and style for all four sides but have some sides have different weights (thicknesses). In such a case, you can use two rules to achieve the desired result. In the following example, the first rule contains the styling common to all four sides (along with a couple of pixels of padding all around to keep the text from touching the edges of the box) and the second rule specifies the differences between them

A common way to style a box is to make all four sides the same color, style, and thickness, in which case you can just write something like this

It is very helpful to temporarily display the border of a box during development so that you can clearly see the effect of styles such as margins and padding. By default, the styles for element boxes are that the border width is set to medium, the border style is set to none, and the border color is set to black. However, because the border style is set to none, the box doesn't display. So all you need to do to quickly display a paragraph's box, for example, is write this

This sets the border style to solid and the box appears. Note, however, that adding borders can alter the layout because borders add dimension to the element. An alternate way to display a box is to add a background color so that the box does not change size.

Shorthand Styling

It gets tedious to write a separate style for each of the four sides of an element, whether you are specifying margins, padding, or borders. CSS offers some shorthand ways to specify these one after another within a single declaration. In such a declaration, the order of the sides of the box is always top, right, bottom, left. You can remember this as TRouBLe, which you will be in if you forget, or you can visualize the order as the hands on a clock going around from 12. So, if you want to specify the margins on an element, instead of writing

[View full width]
{margin-top:5px; margin-right:10px; margin-bottom:12px;
 margin-left:8px;}

you can simply write

{margin: 5px 10px 12px 8px}

Note that there is just a space between each of the four values; you don't need a delimiter such as a colon or comma.

You don't have to specify all four elements; if you miss any, the opposite side's value is used as the missing value

{margin: 12px 10px 6px}

In this example, because the last value, left, is missing, the right value is used and the left margin is set to 10px.

In this next example

{margin: 12px 10px}

only the first two values, top and right, are set, so the missing values for bottom and left are set to 12px and 10px, respectively.

Finally, if only one value is supplied

{margin: 12px}

then all four sides are set to this value.

If you want some of the values to be zero, you can write 0 without supplying a value type like this

{border: 2px 0 0 4px;}

The Box Padding

Padding adds space between the box's content and the border of the box. As part of the inside of the box, it takes on the color of the box's background. Figure 4.4 shows two paragraphs, one with and one without padding.

When you build page layouts from elements that have content in them, padding is an important tool you can use to create white space around the content. Where designers once used to clog markup with presentation code by adding table cell padding and spacer GIFs to create white space, you can now achieve the same effect economically by adding CSS padding styles.

The Box Margins

Margins are slightly more complex than borders and padding. First, most block level elements (paragraphs, headings, lists, and so on) have default margins. In Figures 4.5 4.7, you can see the effect of margins very clearly.

It's good practice to place the following declaration at the top of a style sheet (usually in the second line after the body declaration)

This sets the default margins and padding of all elements to zero so that you don't get confused by which margins and padding the browser sets and which you set. Once you put this in your style sheet, all the default margins and padding disappear.

Often, you will want to mix units when you set margins for text elements such as paragraphs. In such a case, the left and right margins of a paragraph might be set in pixels so that the text remains a fixed distance from a navigation sidebar, but you might set the top and bottom margins in ems so that the vertical spacing between paragraphs is relative to the size of the paragraphs' text, like this

In this example, the space between the paragraphs is always three quarters of the height of the text; if you increase the overall type size in the body tag, not only does the paragraphs' text get bigger, but the space between the paragraphs also increases proportionately. The left and right margins, set in points, remain unchanged. We'll look at this concept further when we start constructing page layouts in Chapter 5.

COLLAPSING MARGINS

Say the following out loud: "Vertical margins collapse." You need to remember this important fact. Let me explain what this means and why it's important. Imagine that you have three paragraphs, one after the other, and each is styled with this rule

Because the bottom margin of the first paragraph is adjacent to the top margin of second, you might reasonably assume that there are 80 pixels (50 + 30) between the two paragraphs, but you'd be wrong. The distance between them is actually 50 pixels. When top and bottom margins meet, they overlap until one of the margins touches the border of the other element. In this case, the larger top margin of the lower paragraph touches first, so it determines how far apart the elements are set50 pixels (Figure 4.8). This effect is known as collapsing.

Although vertical margins collapse, horizontal margins do not. Instead, horizontal margins act as you would expectmargin settings are added together to create space between horizontally adjacent elements. In Figure 4.8, if you set horizontal margins instead of vertical margins with the same values, the distance between the elements would be 80 pixels.

This collapsing margin effect ensures that when an element is first or last in a group of headings, paragraphs or lists, for example, the element can be kept away from the top or bottom of the page or the containing element. When the same elements appear between other elements, both margins are not needed, so they simply collapse into each other and the largest one sets the distance.

Understanding the Box Model