The CSS layout is based on a model that is called a box model; that is, all HTML elements in a document tree are considered to be boxes, including the textual lines.

Each box is made of a content area that contains material (text, images, embedded objects...) and optional surrounding area divided as padding, border and margin areas. The following diagram explains the relationship between the areas:

CSS box model

 

 

 

 

 

 

 

 

 

These properties can be further broken into the segments top, right, bottom and left.

The perimeters that separate the areas are called edges:

  • content or inner edge that is around the rendered content depends of the content's width and height;
  • padding edge surrounds the box padding; if the padding is 0 width, the padding edge is the same as the content edge;
  • border edge surrounds the box border; if the border is 0 width, the border edge is the same as padding edge;
  • margin or outer edge surrounds the margin box; if the margin is 0 width, the margin edge is the same as border edge.

The box's width and height depend on a few factors, for instance whether the content is a text line or a table, etc... They also depend on the browser rendering, thus I.E. 8.0 and older add padding and border into the width property. That situation might be diverted if <!DOCTYPE html> tag is used.

The background style of the content, padding and border areas is specified by the background property while the margin remains transparent.

 

›› go to examples ››