HTML and CSS Reference
In-Depth Information
Box-Model Discrepancy
The CSS box model, which allows block-level elements to be drawn with margins, padding,
and borders, is a key concept in CSS-based design, and one we'll learn more about in several
chapters of this topic. As defined by the CSS specifications, the width of a block-level element,
when it is explicitly stated by the CSS author, defines the width only of the content of the block—
not including and padding (the whitespace inside the block), margin (the whitespace outside
the block), or border. However, Internet Explorer's flawed box-model implementation includes
the margin, padding, and border in the specified width, resulting in a narrower box when dis-
played. For example, the CSS code
div#content {
width: 300px;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
}
should result in an element that takes up 342 pixels of horizontal space (the 300-pixel-wide con-
tent area plus 20-pixel-wide padding (10 pixels on both the left and the right) plus a 20-pixel-wide
margin (10 pixels on both the left and the right) plus 2 pixels of border (1 pixel on both the left and
the right). This is demonstrated in Figure 4-1.
Figure 4-1.
Correct box-model behavior, resulting in a total element width of 342 pixels
However, older versions of Internet Explorer will display the entire element at 300 pixels
wide, subtracting the size of margins, padding, and borders from the content area's width, as
Figure 4-2 illustrates.
