CSS box model

The Cascading Style Sheets (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.[4] While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors.

All HTML elements can be considered "boxes", this includes div tag, p tag, or a tag. Each of those boxes has five modifiable dimensions:

• the height and width describe dimensions of the actual content of the box (text, images, ...)
• the padding describes the space between this content and the border of the box
• the border is any kind of line (solid, dotted, dashed...) surrounding the box, if present
• the margin is the space around the border

According to the CSS1 specification, released by W3C 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.[4][5] Before CSS3, this box model was known as W3C box model, in CSS3, it is known as the content-box.

The total width of a box is therefore left-margin + left-border + left-padding + width + right-padding + right-border + right-margin. Similarly, the total height of a box equals top-margin + top-border + top-padding + height + bottom-padding + bottom-border + bottom-margin.

For example, the following CSS code

.myClass {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: solid 10px black;
  margin: 10px;
}

would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160px and width 260px.

CSS3 introduced the Internet Explorer box model to the standard, known referred to as border-box.[6]

The difference in how width is interpreted between the W3C and Internet Explorer box models

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.[7] On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border).[8] 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."[9]

In 1996, CSS[10] 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.[11] 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.[12] This has been referred to as the traditional[13] or the Internet Explorer box model.[14]

Internet Explorer in "quirks mode" includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box than would result following the standard behavior.[15]

The Internet Explorer box model behavior was often considered a bug, because of the way in which earlier versions of Internet Explorer handle the box model or sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets language.[16][17] As of Internet Explorer 6, the browser supports an alternative rendering mode (called the "standards-compliant mode") which solves this discrepancy. However, for backward compatibility reasons, all versions still behave in the usual, non-standard way by default (see quirks mode). Internet Explorer for Mac is not affected by this non-standard behavior.

Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach.[21] Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content.[13] He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content.[22] Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model.[23]

The W3C has included a "box-sizing" property in CSS3. When box-sizing: border-box; is specified for an element, any padding or border of the element is drawn inside the specified width and height, "as commonly implemented by legacy HTML user agents".[24] Internet Explorer 8, WebKit browsers such as Apple Safari 5.1+ and Google Chrome, Gecko-based browsers such as Mozilla Firefox 29.0 and later, Opera 7.0 and later, and Konqueror 3.3.2 and later support the CSS3 box-sizing property. Gecko browsers previous than 29.0 support the same functionality using the browser-specific -moz-box-sizing property.[25] border-box is the default box model used in Bootstrap framework.

• The world wide web consortium (W3C) specification of the box model
• A tutorial on the CSS box model
• Tantek Çelik's description of the "box model hack"
• Getting Internet Explorer to Play Well with CSS – article on about.com that outlines various ways to get around box model problem and other IE bugs.
• Cascading Style Sheet Compatibility in Internet Explorer 7 – MSDN article, July 2006.
• CSS Box Model differences in Firefox and Internet Explorer – Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.