Rock-solid CSS Layouts

Margin Properties

The difference between margins and padding is that margins exist outside the boundaries of the object, while padding exists inside those boundaries. Figure 8.17 illustrates this difference according to the style sheet rules that are set in the code fragment below. Margins are set in the same way as padding; the only difference is the substitution of the word "margin" for the word "padding."

body {    
 background-color: #808080;    
 color: black;    
}    
h1 {    
 background-color: #c0c0c0;    
 color: black;    
}    
h2 {    
 background-color: #c0c0c0;    
 color: black;    
 margin-left: 5%;    
}    
p {    
 background-color: #c0c0c0;    
 color: black;    
 margin-left: 20%;    
}

Figure 8.17. margin-left settings pushing the content and background right

Notice that the second-level heading and the paragraph, both of which have margin-left properties, are indented from the left edge of the browser. But, unlike the example in which we set the padding-left property, the text and its background color block are indented in this case. This is because the padding, the color block, and the text are inside the content box, while the margin is outside that box.

Next, let's apply padding-left and margin-left settings to the code fragment:

body {    
 background-color: #808080;    
 color: black;    
}    
h1 {    
 background-color: #c0c0c0;    
 color: black;    
}    
h2 {    
 background-color: #c0c0c0;    
 color: black;    
 margin-left: 5%;    
 padding-left: 1em;    
}    
p {    
 background: #c0c0c0;    
 color: black;    
 margin-left: 20%;    
 padding-left: 10%;    
}

As you can see in Figure 8.18, the above markup has caused the margin to push the HTML elements and their surrounding background color blocks to the right, while the padding has moved the text to the right within the colored background blocks.

Figure 8.18. Combining margin-left with padding-left

If you load the above HTML (from the file included in the code archive for this book) and resize it, you'll notice that the indentation of the paragraph and the heading changes as the width of the window changes. That's because we used relative values of 20% for the margin and 10% for the padding. Both of these values are calculated relative to the width of the containing block, which in this case is the browser window. The bigger the browser window, the bigger the margin and padding on the paragraph. The padding on the heading doesn't change, as it's specified in ems.

Margins, Padding, and Lists

By default, all visual browsers will apply a 50-pixel margin to the left edge of a list. This allows room for the list item markers (bullets in the case of a bulleted list; numbers in the case of an ordered list). Unfortunately, the CSS Specification doesn't say explicitly whether this space should be implemented as left margin or left padding in the browser's default style rules. However, the description of the marker-offset property does imply that margin is the way to go.

Whatever the intent of the specification, Firefox and Safari apply a default padding to the left side of lists, while most other browsers (including Internet Explorer and Opera) use a margin. You can test this easily by applying a background-color to an ol or ul element. On most browsers, the background will not cover the list item markers; on Firefox and Safari, they will.

For this reason, whenever you apply your own left margin or padding value to a list, you must be sure to specify both. If you applied only a margin, for example, the default list indentation would display in Firefox, but be overridden on all other browsers. If you applied a padding value only, the default 50-pixel margin would display on Internet Explorer. Only by specifying both margin and padding (usually by setting padding: 0 and using margin to do the job) can you ensure consistent rendering across current browsers.

You can set vertical margins with the margin-top and margin-bottom properties. Here's another HTML page that demonstrates vertical margins:

Example 8.19. boxmodel3.html    
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
 <head>    
   <title>Box Model Demo</title>    
   <meta http-equiv="Content-Type"    
       content="text/html; charset=iso-8859-1" />    
   <style type="text/css">    
     body {    
       background-color: #808080;    
       color: black;    
     }    
     h1 {    
       background-color: #c0c0c0;    
       color: black;    
       margin-bottom: 5cm;    
     }    
     h2 {    
       background-color: #c0c0c0;    
       color: black;    
       margin-left: 5%;    
       margin-top: 5cm;    
       margin-bottom: 5cm;    
       padding-left: 1em;    
     }    
     p {    
       background: #c0c0c0;    
       color: black;    
       margin-left: 20%;    
       padding-left: 10%;    
       margin-top: 5cm;    
       margin-bottom: 5cm;    
     }    
   </style>    
 </head>    
 <body>    
   <h1>No top margin but a 5cm bottom margin</h1>    
   <h2>Top and bottom margins are set to 5cm</h2>    
   <p>A paragraph with top and bottom margins set to 5cm</p>    
 </body>    
</html>

This page renders as shown in Figure 8.19.

Figure 8.19. Demonstrating vertical margins

Unlike horizontal margins, vertical margins are not cumulative. If you have two elements stacked one atop the other, like the h1 and h2 elements shown in Figure 8.19, the vertical spacing between them will be the greater of the margin-bottom setting of the top element, and the margin-top setting of the bottom element. In this case, they are both 5cm, so the distance between the two elements is 5cm (not 10cm, as you might have supposed). If I had defined the margin-bottom of the h1 as 10cm, then the vertical distance separating the two elements would have been 10cm. The containing block in this case is the body, which is, for all practical purposes, the same as the browser window's client area.

It is possible to use negative values for margin property settings. This comes in handy when you've set a margin-left property for the body of an HTML page, but you want to move an element closer to the left margin of the page. The following HTML results in the display shown in Figure 8.20:

Example 8.20. boxmodel4.html    
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
 <head>    
   <title>Box Model Demo</title>    
   <meta http-equiv="Content-Type"    
       content="text/html; charset=iso-8859-1" />    
   <style type="text/css">    
     body {    
       background-color: #808080;    
       color: black;    
       margin-left: 5cm;    
     }    
     h1 {    
       background-color: #c0c0c0;    
       color: black;    
       margin-left: -3cm;    
     }    
     h2 {    
       background-color: #c0c0c0;    
       color: black;    
     }    
   </style>    
 </head>    
 <body>    
   <h1>The body's margin-left is 5cm, but mine is -3cm. </h1>    
   <h2>I have no margin-left setting, so I use the body's 5cm    
       setting.</h2>    
 </body>    
</html>

Figure 8.20. Negative margin setting in practice

As with the padding property, the margin shorthand property lets you set all four margins with a single declaration, and interprets multiple values using the rules shown in Table 8.1.

Border Properties

Border properties are more complex than padding and margin properties because they affect not only the spacing between objects, but the appearance of that intervening space. A border can be, and usually is, visible. In most ways, managing border properties is similar to the process for managing margins and padding, but there are some key differences.

Borders have three types of properties: style, width, and color. By default, a border's style is set to none, its width to medium (note that Netscape 4 sets a default border width of 0, so you can't rely on the default value if you wish to target that browser), and its color to the text color of the HTML element to which it is applied.

The border-style property can take any one of a range of constant values. The available values are solid, dashed, dotted, double, groove, ridge, inset, outset, hidden, and none.

The hidden value has the same effect as none, except when applied to table layouts. Refer to the border-style property in Appendix C, CSS Property Reference for further details.

W3C specifications largely leave the issue of the precise appearance of these borders up to the browsers, so don't be surprised if the results of using these characteristics vary a bit from browser to browser, and platform to platform. But, as is the case with default behaviors for other border settings, generally speaking, the browsers treat this issue predictably and satisfactorily within reason.

The width of a border around an object can be set either with four individual declarations, or with the border-width shorthand syntax. The four properties are border-top-width, border-right-width, border-bottom-width, and border-left-width. Each of these properties can be set with an absolute or relative length unit (such as pixels, ems, percentages, or inches), or with one of three descriptive settings: thin, medium, or thick.

If you use the descriptive settings of thin, medium, and thick, the results are browser-dependent. However, they are fairly predictable and consistent across browsers and operating systems, within a pixel or so for each of the three descriptive settings.

Specific Border Measurements

If you wish to use specific measurements for border widths, you should use pixels. This is the most meaningful unit of measurement for screen layouts, which is where border-width is an important property.

You can control the colors associated with all four borders using the border-top-color, border-right-color, border-bottom-color, and border-left-color properties, or you can just use the border-color shorthand property.

As we discovered in Chapter 5, Splashing Around a Bit of Color, you can supply a color argument in any of the standard ways: using a hexadecimal RGB code (as in #ff9900), using a three-digit hexadecimal RGB shortcut (as in #f90), via the rgb function (as in rgb(102,153,0)), or using a standard color name (as in red).

The shorthand properties border-style, border-width, and border-color all accept multiple values.

There is one additional shorthand property that's probably the most widely used. The border property allows you to specify the style, width, and color of all four borders of an object in a compact form. Since a border that's uniform on all sides is most often your desire, this is an efficient way to set border property values.

The following style rule will produce a uniform, three-pixel, solid, red border around any element with a class="warning":

.warning {    
 border: 3px solid red;    
}