To CSS, every element is a box. The display box for an element has properties shown in the above diagram.

Note that inline elements cannot have a specified height or width; otherwise, the box model for inline and block elements is the same. Also note that margin is on the outside of the element border; padding is on the inside. Margin is the space between element boxes; padding is inside each box.

Each of the properties shown, padding, margin and border, can be specified universally, or for individual sides. For example, p { margin: 2em; } would place a 2em margin equally on all sides of paragraph elements: 2em on the top of every paragraph, 2em on the left, 2em on the bottom and right. p { margin-left: 2em; } would set a margin only on the left-hand side of the paragraph.

Border

border is the only property that takes several values at once: thickness, style and colour, in that order. For example: h3 { border: 2px solid red; } These properties can also be specified individually, as border-thickness, border-style and border-color, but it is generally much more efficient to shortcut to a general border property. (If you want to be super-redundant, you can also specify these separate properties for individual sides: border-thickness-top. border-color-right and border-style-bottom, for example.)

The thickness of a border can be any measurement in any unit recognized by CSS, in addition to the keywords thin, medium and thick.

The border-style can take any of the following keywords: none, hidden (which is the same appearance as none), dotted, dashed, solid, double, groove, ridge, inset and outset. CSS3 adds dot-dash, dot-dot-dash, and wave. (CSS3 adds more border properties, including border-radius, border-image and box-shadow).

colour can take any of the CSS values for specifying colour.

Outline

Technically, outline is a second border, added immediately outside the primary border. It takes the same values and properties as border, but substitutes the word outline .

I rarely use outline except to turn it to none in a CSS reset, as Firefox uses a fine dotted border to indicate visited links by default, which I find visually annoying.

Further shortcuts

It is possible to follow a general property with a specific one to create exceptions: for example, h1 { padding: 2em; padding-left: 0; }, to create 2em padding for the h1 element on all sides except for the left, where padding will be 0. Note the order of properties in the declaration.

It is also possible to specify pairs of properties at the same time: top combined with bottom, and left combined with right:

1. a { padding: 1em 0; }

In the example above, links will have padding of 1em on the top and bottom, and 0 padding on the left and right.

Alternatively, sides may be specified in a sequence. going clockwise: top, right, bottom, left. (It can be helpful to remember the word TRouBLe as a mnemonic.) h2 { padding: 0 5px 2em 10px; } will provide padding for h2 elements: none on top, 5px on the right, 2em on the bottom, and 10px on the left. Note that units of measurement can be mixed.

Finally, it also also possible to combine specifications as { padding: top leftandright bottom; }. For example:

1. div { border: 1px solid black; padding: 2em 0 2em; }

…produces an internal space of 2em at the top and bottom of all divs, and 0 on the left and right.