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.

graphically represents the W3C box model

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.)

graphically represents the IE5.x/Win box model

Note: the left and right padding and borders aren't labeled due to space constraints.

Other Articles on the Box Models

Last update: 2006-11-12

Footnotes:

  1. Internet Explorer and the Expanding Box Problem