A Web Design Community curated by Chris Coyier

Remember The Order of Margin/Padding Shorthand with TROUBLE

By: Chris Coyier on 10/6/2007

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

8 Responses

  1. matt says:

    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. Brian says:

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

  4. Ederic says:

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

  5. JPeezy says:

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

  6. Alexa says:

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

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

* This website may or may not contain any actual CSS or Tricks.