Writing CSS shorthand

Matt Robin | 14 April 2006

The following example uses four lines of CSS code to declare the margins of an HTML element:

.foo{
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}

The same can effect can be achieved using just one line of code:

.foo{
margin: 10px 5px 10px 5px;
}

The order of these values being:

.foo{
margin: top right bottom left;
}

This shorthand can also be used with other CSS properties, such as padding and border.

Permanent link | Filed under: Cascading Style Sheets (CSS)

About the Author

Originally tackling HTML in September 1997 – Matt has since become passionate about Web Standards, CSS, good, clean, effective Web Design, and (legal) Search Engine Optimization. He’s available for Freelance work – via his site: www.mattrobin.com

Aside the Web, Matt also currently works full-time as a ‘GIS Sales and IT Support Manager’ in Hertfordshire, UK, and has an Honours degree in ‘Remote Sensing and Geographic Information Systems’.

Articles by Matt Robin

7 Comments

| Post a comment | Comments Feed

Rik Lomas : http://rikrikrik.com

21 April 2006, 03:06 : Permanent link to comment

Or, for the example above, even shorter:

margin: 10px 5px;
Robert Wetzlmayr : http://awasteofwords.com/

21 April 2006, 03:10 : Permanent link to comment

As a memory hook for the sequence of those values: They obey a clockwise order (12, 3, 6, 9).
Web Man Walking : http://web-man-walking.com/

21 April 2006, 03:41 : Permanent link to comment

I always use the trouble reminder for the order, i.e. TRouBLe!
Peter : http://

21 April 2006, 03:42 : Permanent link to comment

I think the title is a little mis-leading as there are other CSS elements that can also be written shorthand (background and font being two examples).

Shorthand CSS Margins would make more sense, although adding other shorthand CSS elements would still keep this ‘bite sized’ in my opinion.
Jules : http://pen-and-ink.ca

21 April 2006, 04:43 : Permanent link to comment

Isn’t there also a 3-item shortform as well such as margin: 5px 3px 2px; If I remember correctly, it is top+bottom right left.
travis : http://travis.servebeer.com/blog.net/

21 April 2006, 05:16 : Permanent link to comment

I always thought it was helpful to think of them like a clock.

That falls apart with the 2 value and 1 value version though. FWIW the 3 value version isn’t valid AFAIK.

Another useful shortcut is leaving off the units for 0. ie: margin: 0 4px; padding: 1em 0 2em 0;
James AkaXakA : http://akaxaka.gameover.com/

21 April 2006, 05:43 : Permanent link to comment

Jules: The 3-item shortform follows the same logic as the 2-item one; each one left out takes its value from the opposite side.

So margin:5px 3px 2px; would mean 5px-top, 3px-right, 2px-bottom, and 3px-copied-over-from-right-for-left.

If you know what I mean….

Commenting is closed for this article.