Grow your CSS skills. Land your dream job.

Remember The Order of Margin/Padding Shorthand with TROUBLE

Published by Chris Coyier

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

Comments

  1. Permalink to comment#

    I like it.

    I have always remembered that the order is also clockwise. (12, 3, 6, 9)

  2. Yeah! That’s another great way to remember it.

  3. Permalink to comment#

    Yeah, ditto on the clock method…TRouBLe seems to much trouble…

  4. Permalink to comment#

    I also use the clock method. Now, I’ll never forget the right order because of the additional “trouble” method. :)

  5. Permalink to comment#

    I am also TRouBLe so this acronym will never be forgotten!

  6. Alexa
    Permalink to comment#

    Just googled order of padding CSS and came to this post – and now I’ll never forget the trick. Thanks, you rock!

  7. Ahhhhhh! This is the same mnemonic device I came up with. I approve.

    Also, long-time listener, first-time caller. Big fan of the blog. Keep it up!

  8. Ames

    I’m a newbie to web development and this trick is a lifesaver for me. Thanks!!!!!

  9. Greg

    Thanks! This was just the ticket for me. Now it’s no TRouBLe to remember the order. The clock method always messed me up. I always confused it with Dr. Pepper at 10, 2 and 4. If you don’t know what 10, 2 & 4 refers to, then you probably weren’t watching Neil Armstrong when he took that one small step for man either.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".