CSS-Tricks PSD to HTML

Remember The Order of Margin/Padding Shorthand with TROUBLE

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


Theoretically Related Articles:


Responses


  1. 1

    Gravatar

    I like it.

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


    Comment by matt — October 6, 2007 @ 6:16 am

  2. 2

    Gravatar

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


    Comment by Chris Coyier — October 6, 2007 @ 6:21 am

  3. 3

    Gravatar

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


    Comment by Brian — October 6, 2007 @ 3:36 pm

  4. 4

    Gravatar

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


    Comment by Ederic — December 12, 2007 @ 7:34 am

  5. 5

    Gravatar

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


    Comment by JPeezy — December 20, 2007 @ 1:34 pm


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

Live Comment Preview


Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.