CSS Shorthand for Margins and Padding

I have been trying to incorporate some of the 10 CSS tips I posted about a few days back. When it comes to using shorthand for margins and padding I always get confused. I know you can put in 4 values in one margin statement, but I can never remember what order the 4 values are in.

So to help myself out, I wrote up a page on CSS Shorthand Properties.

So to summarize, when you are defining a margin with 4 values, CSS starts at the top of the box and then moves clockwise around the box. So for example:

h2{ margin: 5px 20px 5px 30px; }

This rule defines a top margin of 5px, a right margin of 20px a bottom margin of 5px, and a left margin of 30px. Start at the top, and move clockwise: top, right, bottom, left. Easy! :)

For more information and examples just click on the link.