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 the size of each such block and its content is determined by styling instructions. The guidelines of the box model are described by the World Wide Web Consortium (W3C) .

Specifics

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

The content of each box is determined by four parameters:

  • the height / width of the box (text, images, …)
  • the padding describes the space between the box and the box
  • the border is any kind of line (solid, dotted, dash …) surrounding the box, if present
  • the border 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, plus (top- and bottom-) padding, plus (top- and bottom-) border, plus (top- and bottom-) margin.

For example, the following CSS code

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

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

Bugs

While the W3C recommends the box model in a clear and unambiguous way, some older browsers do not apply it correctly. Therefore, they can not display the dimensions of a page correctly. The most notable bug in the application of the Internet Explorer model , and is known to the Internet Explorer box model bug .

References

  • The World Wide Web Consortium (W3C) specification of the box model
  • A tutorial on the CSS box model