XHTML Mobile Profile and CSS Reference: The CSS Box Model

The CSS Box Model

CSS uses a "box model" for specifying the dimensions and components of elements: The properties you use for describing the dimensions and components of elements are based on an imaginary box, which is composed of the element's content, padding between the content and a border, a border, and a margin between the element's border and any adjacent object or the edge of the screen.

NOTE CSS uses a clockwise scheme for box sides: top, right, bottom, left.

Box model shorthand properties combine multiple properties into a single property, for convenience. For example, you can set the width of all the margins of an element at once with the margin shorthand property, rather than having to set margin-top, margin-right, margin-bottom, and margin-left individually.

Five of the box model shorthand properties (margin, padding, border-width, border-color, and border-style) can take from one to four values, in the following pattern:

Pattern	Effect
`a`	Sets top, bottom, right, and left to `a`
`a b`	Sets top and bottom to `a`; right and left to `b`
`a b c`	Sets top to `a`, right and left to `b`; bottom to `c`
`a b c d`	Sets top to `a`; right to `b`; bottom to `c`; left to `d`

(The border-top, border-right, border-bottom, border-left, and border shorthand properties do not follow this pattern.)