How to Remember CSS Shorcut Order

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.

2 thoughts on “How to Remember CSS Shorcut Order

  1. 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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s