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:
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.