Box Models
There are two box models: the one defined by the W3C in CSS2 and the IE5.x for Windows one. Both have merits.
The IE5.x/Win box model is useful for when you want to set an element to
100% width explicitly yet still be able to have left and/or right padding
and/or borders without having a total width greater than the width of the
parent element. The W3C box model makes more sense for objects like images
(<img>) that have an intrinsic width — why would the
padding and borders be within the specified dimensions?
In some browsers, including IE6 and IE7, the box model that will be used by the browser will be determined by which document type (doctype) you use.
W3C Box Model
In the W3C box model the padding and borders are added to the dimensions of the box. More specifically, the left and right padding and left and right borders, when specified, are added to the specified width (when it's not set to auto) to make a total width that is greater than the specified width. Likewise, the top and bottom padding and top and bottom borders, when specified, are added to the specified height (when it's not set to auto) to make a total height that is greater than the specified height.
Note: the left and right padding and borders aren't labeled due to space constraints.
IE5.x/Win Box Model
In the IE5.x/Win box model the padding and borders use up some of the
specified dimensions of the box, so that the total width will be the same as
the specified width. IE5-6/Win's (and IE7's when in backwards compatibility
mode) implementation of overflow:visible; is incorrect [1], so a set height will be treated
like min-height, which is not supported. (IE7 does support min-height when it
is in Standards Compatibility mode.)
Note: the left and right padding and borders aren't labeled due to space constraints.
Other Articles on the Box Models
- Dodging the Box Model and other Oddities
- Difference between box models, doctype switching, etc.
- The Box Model Problem
- Box model tweaking
- Interactive CSS Box Model Demo