I have always had trouble remembering the correct order for CSS shortcuts like this:
margin: 3px 4px 2px 3px;
The order is Top, Right, Bottom, Left.
I have just found two ways to remember this.
The first is using the word trouble:
T R o u B L e
The consonants give the order.
The second (pointed out by a colleague this morning) is using a clockface starting at the top and going clockwise.
12 is at the Top
3 is on the Right side
6 is at the Bottom
9 is on the Left.
Richard Hulse 
Yeah, just remember that it goes clockwise. The reason for this is because values from opposite sides will be substituted if the value isn't present.. eg, “margin: 4px 2px” is the same as “margin: 4px 2px 4px 2px” because left gets the value from right by default. You can even put “margin: 4px 3px 2px” which would be evaluated as “margin: 4px 3px 2px 3px” because, again, left would get the right value.
LikeLike
Originally set up to follow the points of a compass… NESW… I guess it works just as well with remembering clockwise motion…
LikeLike