CSS Shorthand – The Lowdown.

There are many CSS properties that support attribute shorthand to save time, space and may even make it easier for you to read and understand, too. Chris Coyier from CSS-Tricks.com takes us through some examples.

One of the more common properties that allow for shorthand to be used, is margin: and it’s the first one that Chris looks at. He explains how the shorthand is written and read, and shows how it works along the way.

There are four main ways to use shorthand with a property like margin:. First, you can list all four values for top, right, bottom and left. If your right and left values are the same you can shorten to just three values; top, right/left and bottom. If both your right/left and top/bottom values are the same it can be shortened even more to be just top/bottom and right/left. And lastly, if all values are equal, then you need only input one which will then be applied to each of the four margins on your page.

So this code:

#page-wrap {
    width: 500px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px:
}

Can be shortened to this:

#page-wrap {
    width: 500px;
    margin: 10px auto;
}

The same is true with other properties, like padding: for instance. The two examples below equate to being the same exact thing.

p {
    padding-top: 10px;
    padding-left: 50px;
    padding-right: 0px;
    padding-bottom: 20px;
}

p {
    padding: 10px 0px 20px 50px;
}

You can easily see why CSS shorthand exists and why it is a good idea to use it wherever you can.