Box Model

Width difference between the W3C and IE box models.

The CSS specification describes how elements of web pages are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements — such as <p> and <blockquote> — a width and height, and three levels of boxes surrounding it: padding, borders, and margins. While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors.

Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border). The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."

In 1996, CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.

At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, Netscape 4.0 and Internet Explorer 4.0 both defined width and height as the distance from border to border. This has been referred to as the traditional or the Internet Explorer box model.

IE box model bug

The Internet Explorer box model bug is a software bug in the implementation of Cascading Style Sheets in earlier versions of Microsoft Internet Explorer, a web browser for Microsoft Windows. Internet Explorer 6 and newer are not affected in their standards-compliant mode, but for compatibility reasons, the bug is still present when a page is rendered in "quirks mode". The bug does not affect Internet Explorer for Mac, which was discontinued by Microsoft in 2006.

According to the CSS1 specification, released by the World Wide Web Consortium in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Internet Explorer 5 includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box. [edit] Workarounds