A mnemonic for the order of CSS margin and padding shorthand properties

dland_18625 0
Viewed 28845

I can never remember the order of the shorthand property for setting the margin or padding in one declaration. That is:

margin-top:    2px;
margin-bottom: 4px;
margin-left:   3px;
margin-right:  8px;

may be written as

margin: 2px 8px 4px 3px;

Yes I understand that one can visualise the order by thinking of a clock, starting at midday and moving clockwise. But I keep forgetting about that. I need to recall the order top, right, bottom, left textually.

Hence, T R B L.

Something like This [R-noun] [B-verb] [L-nouns] is perhaps the way to go but I feel myself lacking inspiration. If anyone has come across a useful mnemonic for this I'd love to hear it. Like a good meme, I'm sure once I get something lodged in my brain I will be unlikely to forget it.

mnemonics css
22 Answers

If you don't get it right, there will be TRouBLe

Paul_Dixon_65210

Actually the clock thing works perfectly. It is the most intuitive way to remember it, at least for me.

user_245450

Tricky Rectangle Border Logic ?

Paul_Dixon_65210

Another attempt:

Tyrannosaurus Rex : Big Lizard

Paul_Dixon_65210

The Really Big Lebowski

Paul_Dixon_65210

Just think clockwise, it's the easiest way. Starts at the top and goes around... much easier to remember than some silly phrase (provided you know how to read a clock...)

Logan_Serman_295950

T R o u B L e.

user_347950

Timewise Rotation, Bit Lame?

Paul_Dixon_65210

Try Roast Beef Leftovers ?

Paul_Dixon_65210

"Top,Right,Bottom,Left"
Really
Bad
Limerick

inspite_317650

Think that you're reading Arabii or Hebrew: read from the top of the page, right to left to the bottom. ;P The good thing about this "rule" is that it works for the 3 value version too: top right-and-left bottom

Actually, i allso thought it was hard to remember, but as soon as I discovered it was the direction of the clock it was easier.

Stein_Gauslaa_Strindhaug_261150

It is 

top
right 
bottom 
left

not what you have

Think Right Before you Leap

inspite_317650

Theres always the town of TRumBuLl Connecticut

Admin1

If you're old enough to remember the original Star Trek TV series (you know, with Capt Kirk), well first of all, you're too damn old. But there is "The Trouble with Tribbles" episode. Both nouns in the title work. I've used that in the past, but also prefer the clock analogy.

user_56761800

Whenever you strike with a given situation, just think of a clock-wise rotation i.e., way the clock rotates from 0 to 60 in a circular rotation.

Clock thing is easier to remember than the word TRouBLe (as marked answer) in my opinion since the word trouble belongs to English language and all those minds native to English language might find it easier to remember the word TRouBLe in relevancy to the given situation but not others who only use English language when they really have to.

Same is not true with clock-wise rotation of a clock, when it comes to remembering something (as asked it the question) since clock-wise-rotation is a very well-known phenomena world-wise.

user_108772050

A few abbreviations (one may consider the one which sounds familiar):

  1. TROUBLE (TROUBLESHOOT,TROUBLESOME)
  2. TERRIBLE
  3. TRIBBLE
  4. The Royal British Legion
  5. Tobacco Road Basketball League
  6. Temporary Revenue Borrowing Limit
  7. Transformational Rule-Based Learning
user_97287690
Related