When laying out a document, the browser’s rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Credit: MDN

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

Explanation of the different parts:

  • Content Edge — The content edge of the box where text and images appear.
  • Padding Edge — Clears an area around the content. The padding is transparent.
  • Border Edge — A border that goes around the padding and content.
  • Margin Edge — Clears an area outside the border. The margin is transparent.

If the property is set to (default) and if the element is a block element, the content area's size can be explicitly defined with the , , , , , and properties. The padding area, bounded by the padding edge, extends the content area to include the element’s padding. Its dimensions are the padding-box width and the padding-box height.

If the property is set to , the border area's size can be explicitly defined with the , , , , , and properties. When there is a background ( or ) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the css property.

Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the property, even though the borders and padding are still displayed around the content.

Developer with 3 yrs of industrial experience in developing scalable web applications.