In December 1996 the W3C published CSS1, the first version of the CSS spec. It used this diagram to define a 'box model' of progressively larger boxes surrounding the content:

 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

         |    element width    |
|               box width               |

When Microsoft released CSS1 support with their new Trident layout engine, it acted as if the spec had instead had:

 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

   |          element width          |
|               box width               |

Specifically, IE was treating width to include the border and the padding while CSS1 treated width as including only the content. This became known as the "IE box model".

In 1998 the Web Standards Project compiled a list of IE's many CSS failings, including this one. Every browser had CSS bugs, however, so this wasn't particularly bad. They made a similar list for Opera and declined to make a list for Firefox's ancestor Netscape claiming that "trying to list the important bugs would be an exercise in writing long documents".

Netscape died and was reborn as Firefox [1] with a new rendering engine. Opera fixed their bugs. Apple took the KHTML engine and built WebKit to power Safari. Google took WebKit and made Chrome. Microsoft fixed this in IE6, but thanks to quirks mode and the persistence of IE5, web developers still had to deal with IE's interpretation.

Occasionally people would suggest that what IE was doing was actually better and the standard was flawed:

Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He'll measure the distance between the sides of the box (the 'borders'). No one will think of measuring the content of the box.

Web designers who create boxes for holding content care about the *visible* width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.

Or more practically:

Imagine you're creating a two column layout. The left column should be 30% and the right 70%:

    .left{
        float: left;
        width: 30%;
        background-color: pink;
        border: 3px red dotted;
        height: 150px;
    }
    .right{
        float: left;
        background-color: lightgreen;
        width: 70%;
        border: 3px green dotted;
        height: 150px;
    }

    <div class="left">content-box</div>
    <div class="right">box-sizing</div>

If you add a border to either box, the total with of the elements will be greater than 100% so the second box will be pushed onto the next line.

This sentiment lead to a heavy emphasis on correctness:

Regardless of which approach makes more sense to you, the correct element box model is the CSS model, and that's the one used by IE6 when in standards mode.

Many people still think the IE version was better, and in fact CSS3 now lets you specify you want to set the width including padding and the border:

box-sizing: border-box;

As Paul Irish suggests, you can apply it site-wide with a '*':

* { -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

So was Microsoft right all along? It's tricky. If CSS1 had defined width to include the border and padding from the start, it would have been better. It's nearly an arbitrary choice, and web developers can work with either, but especially when working with percentages an inclusive width is nicer.

Given that the spec defined it the other way, though, the signal it would have sent to Microsoft to adopt their misinterpretation would have been bad for the web. Microsoft was already using an embrace, extend, and extinguish approach, where they intentionally made products that acted differently from competitors' in order to lock users into the Microsoft versions. They came very close to succeeding with the web: from approximately 2000 to 2005 IE was so popular that many sites designed just for it. Adopting IE's approach here then might have told Microsoft "you can do whatever you want with IE and we'll adjust the standards to make it legal".

I don't like that this was more like a dominance game than engineering and design.

[1] Technically the new rendering engine, Gecko, predates the Phoenix Firebird Firefox project. When Phoenix 0.1 was released in September 2002, Netscape had been using Gecko since November 2000's version 6. By that time IE was over 85% of the web, though.