Shorthand Properties

Some properties can be combined into shorthand notation—a notation that allows us to specify values for related properties in a single declaration.

Shorthand for Box Properties

One form of shorthand notation allows us to specify values for two, three, or four sides of a box simultaneously, like this:

margin: 1em 2em 3em 4em;

That declaration is equivalent to these:

margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4em;
Note: The TRouBLe Mnemonic

Note the order in which these properties occur in the shorthand notation. They appear in a clockwise order, starting at the top: Top, Right, Bottom, Left. Remembering this order keeps you out of TRouBLe.

This form of shorthand notation can take one, two, three, or four values. If four values are specified, they’re assigned to the appropriate sides in TRouBLe order. If only two or three values are specified, the “missing” side is assigned the same value as the one opposite it. If only a single value is specified, it’s applied to all four sides. Take a look at this declaration:

margin: 1em 2em 3em;

That’s equivalent to these:

margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* same as margin-right */

In the same vein, consider this declaration:

margin: 1em 2em;

It’s the same as these:

margin-top: 1em;
margin-right: 2em;
margin-bottom: 1em; /* same as margin-top */
margin-left: 2em; /* same as margin-right */

This form of shorthand notation is used for the properties: margin, padding, border-width, border-color, and border-style.

Shorthand for Other Properties

A somewhat different form of shorthand notation allows us to specify a number of related properties at once. For example, we can combine multiple background-related properties into one background declaration:

background: #fff url(bg.png) no-repeat fixed right top;

This declaration is equivalent to the following:

background-color: #fff;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;

Unlike the shorthand for box-related properties, when we’re combining related properties, the order of the values is usually not relevant. That said, be sure to check each property for the required syntax.1

If a value is omitted, the initial value will be assigned to the corresponding property. Look at this declaration:

background: url(bg.png);

It’s the same as these:

background-color: transparent; /* initial value */
background-image: url(bg.png);
background-repeat: repeat; /* initial value */
background-attachment: scroll; /* initial value */
background-position: 0% 0%; /* initial value */

Omitted values aren’t ignored, so attempts to mix shorthand and standard declarations like the following are doomed to fail (they’re also likely to confuse anyone who’s looking at the code):

background-color: #fff;
background: url(bg.png);

The background color will not be white (#fff), since the first declaration provided here is overwritten by the implicit declaration background-color: transparent; in the shorthand property.

This form of shorthand notation is used by the properties: border, border-top, border-right, border-bottom, border-left, outline, background, font, and list-style. See the relevant reference pages for the syntax details of each property.

Footnotes

1 We prefer to use the order in the CSS2.1 specification.

User-contributed notes

Related Products