A mnemonic for the order of CSS margin and padding shorthand properties

Question

I can never remember the order of the shorthand property for setting the margin or padding in one declaration. That is:

margin-top:    2px;
margin-bottom: 4px;
m         


        

Answer 1

The clock trick works for the 4 number shortcut, but is there any logic to the 3 and 2 number shortcuts? 1 number and it applies to everything, and that makes sense, but

1 = (T/R/b/l) 
2 = (T=b) (R=l)   
3 = (T) (R=l) (b)  
4 = (T) (R) (b) (l)

It just doesn't seem logical at all. But... First value pertains to Top, Second pertains to the Right, Third is the bottom and Fourth is the left; A number is not specified if it's the same as its opposite. Horizontal and vertical MUST be declared unless all values are identical.

In other words, you always specify the Top and Right values, bottom and left fall in as required.