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;