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 comments:
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.
Originally set up to follow the points of a compass... NESW... I guess it works just as well with remembering clockwise motion...
Post a Comment