Remember The Order of Margin/Padding Shorthand with TROUBLE

Avatar of Chris Coyier
Chris Coyier on

Recently I posted about a little trick about remembering the css anchor selectors. Now I have another little trick that is even more useful, using the word TROUBLE to remember the order of padding/margin amounts in CSS shorthand. The trick is that the first four consonants in the word are the first letters of “Top”, “Right”, “Bottom” and “Left”. I love this trick because I can never seem to remember which ones are which. I have had such trouble with it I’ve actually been up in the air on whether I use CSS shorthand at all because sometimes I feel it makes the code less readable. Now I’ll never forget! Here is a little graphic to help cement it to our minds =).

trouble.gif