Remember The Order of Margin/Padding Shorthand with TROUBLE

Quite often when I am working on a site or designing templates for others, I use the following set of style rules which is considered css shorthand.

.imgrgt {
	padding: 5px 0px 5px 10px;
	float: right;
}

The question came up recently on one of the forums as to what do each of these px’s refer to? 

Remember The Order of Margin/Padding Shorthand with TROUBLE is an old article by Chris Coyier, but it remains a good reminder.

Use 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". He even includes a small graphic you can print out as a reminder.

If all of the units of measurement are the same, you can use the following shorthand:

padding: 5px;
 

Comments

  1. Well it puts an old Cat Stevens song in mind, so that’s a good thing. But my way of remembering this has always been visual, starting at the top and proceeding clockwise.

    Then there are the shorter versions — one value is applied to all four sides (of course); two values are applied to top/bottom and right/left; three values allow you to specify top / right&left / bottom. That’s trouble enough, but not sure how to roll it into a mnemonic.

  2. javadth says:

    how can i set minimum width for all images of the page ?

  3. Here is more info about margin and padding:
    http://basicuse.net/articles/pl/textile/html_css/how_to_set_margins_and_paddings_in_css
    You can set padding with two values, in such case it will duplicate values.

Speak Your Mind

*