In the CSS box model, as defined by the CSS2.1 specifications, an element ascertains its total dimensions by adding together the content area dimensions plus any margin, padding, or borders that may have been declared. Conversely, if we use the Internet Explorer 5 box model (the IE5 box model for short),¹ padding and borders will shrink the content area’s dimensions instead of increasing the element’s total dimensions.

To demonstrate, the following rule sets several properties that affect the dimensions of .box elements:

.box {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000;
  margin: 15px;
}

The total size of the element, using the IE5 box model, will be calculated as follows:

Total width = 200 + 15 + 15 = 230px (width + margins)
Total height = 150 + 15 + 15 = 180px (height + margins)

It follows that the available content area is reduced, because padding and borders have to be subtracted from the dimensions that were declared. The available content size, using the IE5 box model, would be calculated as follows:

Available content width = 200 - 10 - 10 - 1 - 1 = 178px
Available content height = 150 - 10 - 10 - 1 - 1 = 128px

Compare this with the dimensions for the correct box model in Table 1, and you can see that this method of calculation will make a considerable difference to the element’s size.

The size difference can be seen clearly in Figure 1.

The fundamental differences between these two box models means it’s important that you understand and are aware of both models when you’re creating code. Internet Explorer for Windows 5 (including 5.5) uses the IE5 box model at all times, but Internet Explorer 6 and 7, and Internet Explorer 5 for Mac, use it only when in quirks mode.

You may well be wondering why two box models exist. To answer this question, we need to travel back in time to the creation of Internet Explorer 5 for Windows, when Microsoft decided that the box model would contain borders and padding within the stated dimensions, rather than increasing them. This approach wasn’t as silly as it may seem at first glance: in cases in which you have an element with a width of 100%, the IE5 box model allows you to add padding and borders safely. Compare this to the correct CSS box model, in which you cannot add any padding or borders to an element with a width of 100% without breaking the layout.

Although the IE5 box model appears superior in this example, the correct box model is more useful in nearly all other cases. No other browser implemented the IE5 box model, and Microsoft eventually complied with the CSS standards and corrected its box model implementation in Internet Explorer 6 (when in standards mode). Before that, though, there was a long period in which CSS authors were forced to deal with two competing box model implementations—a situation that explains why so many CSS hacks were created.

As the IE5 box model had some merit, it has been proposed that CSS3 will provide authors with the choice of specifying which model to use via a box-sizing property. Firefox, Opera, and Safari have all implemented versions of this property, which you can read more about in -moz-box-sizing.