CSS box model: Difference between revisions

Revision as of 14:07, 22 May 2010

Revision as of 17:07, 11 November 2015

Line 1:

In [[web development]], the [[CSS box model]] refers to the composition of a webpage or [[HTML]] page from blocks or boxes using [[CSS]]. Specifically, the box model describes how the size of each such block and its content is determined through styling instructions. The specific guidelines of the box model are described by the [[World Wide Web Consortium|World Wide Web Consortium (W3C)]].

#REDIRECT [[Internet Explorer box model bug]]

==Specifics==

[[File:W3C and Internet Explorer box models.svg|thumb|300px|The difference in how width is interpreted between the W3C and Internet Explorer box models]]

The content of each box is detemined by 4 parameters:

:*the height/width describes the 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

The total width of a box is therefore the width of the content, plus (left- and right-) padding, plus (left- and right-) border, plus (left- and right-) margin. Similarly, the total height of a box equals the height of the content, plus (top- and bottom-) padding, plus (top- and bottom-) border, plus (top- and bottom-) margin.

For example, the following CSS code

<code>

:.myClass{

:width: 200px;

:height: 100px;

:padding: 10px;

:border: solid 10px black;

:margin: 10px;

:}

</code>

will specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160px and width 260px, which is the sum of the content, padding, border and margin.

==Bugs==

While the [[W3C]] specifications specify the box model in a clear and unambiguous way, some older browsers do not apply it correctly. Therefore, they may not display the box dimensions of a web page correctly. The most notable bug in correctly applying the box model occurs in older versions of [[Internet Explorer]], and is known as the [[Internet Explorer box model bug]].

==References==

*[http://www.w3.org/TR/CSS21/box.html The world wide web consortium (W3C) specification of the box model]

*[http://www.w3schools.com/css/css_boxmodel.asp A tutorial on the CSS box model]