Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 271

Thus, the style rule

div {
border: 5px solid black;
padding: 10px;
width: 600px;
}
sets the total width allotted to the div element to 600 + 2(10) + 2(5) = 630 pixels. Note
that this calculation must include the widths of both the left and right borders and pad-
ding space. In addition to knowing each element's total width, you also must keep track
of the margin spaces around your elements if you want to ensure that your content will
fi t nicely within the width of your Web page.
Older versions of Internet Explorer calculated widths differently from the CSS stan-
dard. In those versions, the width property set the total width of an element including
the content, padding, and border. Thus, a div element with the above style rule would
measure 600 pixels wide, not 630, as Internet Explorer would assign only 570 pixels to
the element content, leaving 20 pixels for the left and right padding and 10 pixels for the
left and right borders. To avoid confusion—and to avoid ruining your layouts—always
include a DOCTYPE declaration in your HTML fi le to put Internet Explorer and other
browsers into Standards mode rather than Quirks mode. For a discussion of Standards vs.
Quirks mode, see Tutorial 1.

Using the Outline Style
One way of simplifying your layout width calculations is to avoid using left and right
padding. Instead, you can set the left and right padding to 0 pixels and separate your
elements using only the left and right margins. In some cases, you also can replace your
borders with outlines. An outline is a line drawn around an element; but unlike borders,
an outline does not add to the total space allotted to an element, nor does it affect the
position of the element in the page. Unlike borders, outlines also can be non-rectangular
in shape (see Figure 4-45).

Figure 4-45 Applying an irregularly shaped outline

an outline covering
a span of text
within a paragraph

An outline width is defi ned using the style property

outline-width: value ;

where value is expressed in one of the CSS units of length, or with the keywords thin ,
medium , or thick . Outline colors are defi ned using the property

outline-color: color ;

where color is a CSS color name or value. Finally, the outline design is defi ned using
the style property

outline-style: style ;

where style is one of the design styles listed in Figure 4-46.