• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Positioning Elements > Understanding the Box Model

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

p {border: 1px solid #333; background-color:#EEE}

Figure 4.1. Spacing between the two paragraphs on this page is created by their margin settings.

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.

Figure 4.2. The box model diagram shows how padding pushes in from the border and margins push out from it.

You can adjust three aspects of the box with CSS:

Border. You can set the thickness, style, and color of the border.

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.

Margin. You can set the distance between this box and adjacent elements.

Padding. You can set the distance of the content from the border of the box.

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

Border has three associated properties:

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.

Color. This includes any color value (for example, RGB, hex, or keyword).

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

p {border-style: solid}

or for just one side, like this

p {border-left-style: solid}

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

p {border-style: solid dashed double inset}        <-- a

(a)Borders are applied in this order: top, right, bottom, left

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

h2.headbox {border:solid #AAA; padding:2px;}
h2.headbox {border-width:3px 1px 1px 3px;}        <-- a

(a)Widths are applied in this order: top, right, bottom, left

which results in Figure 4.3.

Figure 4.3. Here, two border styles are applied to a box.

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

p.warning {border: 4px solid #3FF}        <-- a

(a)Puts a thick red line around the paragraph

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

p {border: solid}

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

{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.

Figure 4.4. Padding creates space between the box border and the content, as in the second paragraph.

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.54.7, you can see the effect of margins very clearly.

Figure 4.5. Here you can see how the default margins appear in a browser.

Figure 4.7. Removing the margins causes the borders of all three elements to touch.

Figure 4.6. If you display the header and paragraphs with borders turned on, you can clearly see how the margins create space between them.

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)

* {margin:0; padding:0}        <-- a

(a)The asterisk selector means "any element"

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

p {font-size: 1em; margin: .75em 30px;}        <-- a

(a)When only two margin values are stated, the first defaults to top and bottom, the second to left and right

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.


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

p {width:400px; height:50px; border:1px solid #000;
margin-top:50px; margin-bottom:30px; background-color:#CCC;}

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 set—50 pixels (Figure 4.8). This effect is known as collapsing.

Figure 4.8. Vertical margins collapse; they overlap until one element touches the border of the other.

Although vertical margins collapse, horizontal margins do not. Instead, horizontal margins act as you would expect—margin 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.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint