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 =).
Loading ...
1
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
Yeah! That’s another great way to remember it.
Comment by Chris Coyier — October 6, 2007 @ 6:21 am
3
Yeah, ditto on the clock method…TRouBLe seems to much trouble…
Comment by Brian — October 6, 2007 @ 3:36 pm
4
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
I am also TRouBLe so this acronym will never be forgotten!
Comment by JPeezy — December 20, 2007 @ 1:34 pm