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 =).
Remember The Order of Margin/Padding Shorthand with TROUBLE
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
I like it.
I have always remembered that the order is also clockwise. (12, 3, 6, 9)
Yeah! That’s another great way to remember it.
Yeah, ditto on the clock method…TRouBLe seems to much trouble…
I also use the clock method. Now, I’ll never forget the right order because of the additional “trouble” method. :)
I am also TRouBLe so this acronym will never be forgotten!
Just googled order of padding CSS and came to this post – and now I’ll never forget the trick. Thanks, you rock!
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!
I’m a newbie to web development and this trick is a lifesaver for me. Thanks!!!!!
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.