The CSS Pocket Guide

5. The Box Model

The space a block-level element takes up in a layout is controlled by the values of the height, width, margins, padding, and border properties. The description of how these properties interact and how those calculations are made is called the box model.

In the standard box model (content-box), the padding, borders, and margins of an element are added to the width and height of that element to determine the space it occupies in the layout. Figure 5.1 displays a diagram of the box model as found in the CSS2.1 specification (http://www.w3.org/TR/CSS21/box.html). The additive process where width or height is not inclusive and thus the total size an element takes up may feel counterintuitive to some, but this works well when nesting ...