The CSS Box Model

Any element in a HTML document can be considered to exist within a definable area, or box. When talking about CSS in relation to page layout, it is useful to be able to reference a "box model" to enable us to visualise how one element relates to another, and to the page as a whole. It is also useful, when setting the various properties of an element, to be able to predict the effect of any changes on the appearance of both the page itself and its individual elements. What we are interested in here are the margin, border and padding properties of an element. The diagram below illustrates the relationship between these properties and the element's content.


The CSS box model

The CSS box model


The margin is an area around the element outside the border. It does not have a background colour, and is completely transparent. The border surrounds the content and any padding. Its default colour is dependent on the background colour of the element. The padding is the space between the border and the actual content of the element. Its colour is dependent on the background colour of the element. The content of the box usually consists of text or images (although it could of course also contain other boxes). Note that the overall dimensions of an element must be calculated taking into account the padding, border, and margin values. The width and height properties of the element itself only specify the size of the content area. Consider the following example:


div
{
  width: 200px;
  height: 150px;
  padding: 15px;
  border: 5px;
  margin: 15px;
}


The overall dimensions of the box can be calculated as follows:

    Width: 200 + (15 x 2) + (5 x 2) + (15 x 2) = 270 pixels

    Height: 150 + (15 x 2) + (5 x 2) + (15 x 2) = 220 pixels