Diagram of the box model

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

Note that inline elements cannot have a specified height, width, margin, padding-top or padding-bottom; 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; }

…places 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, while the following:

p { margin-left: 2em; }

…would set a margin only on the left-hand side of the paragraph.


border is the only basic box property that takes several values at once: thickness, style and color, 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 the 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 in be any CSS measurement unit, in addition to the keywords thin, medium and thick.

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. (It also adds more border properties, including border-radius, border-image and box-shadow).

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


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. The property is used for : it provides visual feedback for links when the TAB key is pressed. It should be noted that this outline is does not take up any physical space on the page, and will not affect your layout: outline is drawn on top of elements.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.