Remember The Order of Margin/Padding Shorthand with TROUBLE

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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 =).