If you've started in on building web sites, chances are that you have heard of "the box model." But what is it?
The box model refers to the specifications regarding how dimensions are calculated in HTML and CSS. Essentially, the "box" consists of content width, padding, borders, and margins, whether horizontally or vertically.
It must be understood that the elements mentioned above must be added together to arrive at the total width of the box:
Note the example above. I have added dotted lines to illustrate invisible elements: padding and margins.
Where the text actually appears in the illustration above would be within the area called "width" in the box model. But obviously, the "box" takes up more room than that, doesn't it? The rest of the yellow area would be due to the padding property. And the red is the border. What lies outside the border is the specified margin. All of these together make up total width.
This is very important to understand, because one of the common calculation mistakes is to think that "width" means total width, and that margins, borders, and padding are subtracted from that. The resulting "box" ends up larger than the designer planned.
Need an example of the importance of understanding the model? Suppose that you wish to contain all of your page content inside a "wrapper" that will center your page. You need to specify a width for your wrapper. If you don't calculate the "box" correctly, your elements are going to be wider than the wrapping container, which can lead to all sorts of unintended consequences - simple "breakage" of your design, elements spilling out of the wrapper, or moving down to make room.
To illustrate: if you wish to have an element that is 600 pixels wide, with 12 pixels of padding, a 2 pixel border and a 5 pixel margin, how big would your wrapper have to be in order to contain that? You would need 600px + (12 x 2px) + (2 x 2px) + (2 x 5px) = 638 pixels (don't forget to count the padding, borders, and margins on both sides). And just how much that 638-pixel wrapper actually takes up on the page is going to be dependent, in turn, upon its padding, borders, and margins.
Okay, the box includes (content) width/height, plus padding, borders, and margins. Quite straightforward. . . except that older versions of Internet Explorer (in other words: everything prior to 6.0) didn't adhere to these standards (in fact, without a properly-declared DOCTYPE on the page, neither will current versions of Internet Explorer - but that's a story for another time). Instead, IE did just what you may have expected from the box model: it subtracted padding, borders, and margins from the stated width.
Much of the time, this is not a big deal, but if you are working with small boxes, or in a situation where "white space" is undesirable, you'll want to deal with this. Otherwise, a box 100px wide with a 10px margin, 5px padding, and a 2px border will in reality end up only 66 pixels wide, for example.
How do you avoid this problem?
Basically, there are two avenues to approach the issue:
1. Avoid specifying widths wherever possible. This is the simplest solution. For example, if you want your div (sorry, tables are trickier) to span the width of your "wrapper," there is usually no need to make the calculations provided above. Omit the "width" property altogether in your style. Simply specify padding, borders, and margins as needed, and the div will expand to fill the rest of the width of the wrapper. Exceptions: the above will not work with floated or absolutely-positioned elements, which need specified widths.
2. If you absolutely must specify a width, and the (pre-version 6) Internet Explorer reversed box model will just not be acceptable, use conditional comments to provide the "extra" width to IE 5.5 and lower. To learn about conditional comments and more on how to handle the box model, see this excellent off-site article. For a short version introduction to conditional comments to deal with Internet Explorer bugs, see our notes here.
Click on the monitor for more info about a site.