O'Reilly logo

The CSS Pocket Guide by Chris Casciano

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required