Box Model


All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Important: This example will not display correctly in IE8 and earlier versions; however, the next example solves that problem.

Box Model Sample

The line above is 250px wide.
The total width of this element is also 250px.