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

Question

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.

Samy

This is overkill for anyone familiar with analogue clocks. Abstractions like words and acronyms are unnatural to the human mind, remembering T R B L and then manually converting each letter to a physical orientation is making life more complicated than it needs to be IMO. Much better to remember the order visually, you're working in a visual medium in this context after all :D. – Disaccord

Should also remember what happens if only two or three values are given. For example "margin: 3em 5em;" and "margin: 3em 5em 6em;". In the first one, 3em is used for the top and bottom, and 5 for left and right sides. In the second one, 3 for top, 5 for left and right, and 6 for the bottom. I assume it's easy to remember what happens if only one value is given. – Haply

I love the answers, but this has got to be the most ridiculous question only because of the way you approach it. You completely lost me with the nouns and verbs. It's a box, put a clock in it and be done with it. – Viewless

Answer 1

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

Lollis

No TRouBLe to remember if you remove vowels – Ballplayer

@zzapper: OUch --- EEEks. I got it wrong and removed the consonants. – Enthymeme

css-tricks.com/… – Coth

Answer 2

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

Ciri

And it works pictorially too... most of the time, you're going to thinking along visual lines anyhow. – Orpheus

Answer 3

Tricky Rectangle Border Logic ?

Lollis

I haven't heard that one before, but I like it :) – Barmecidal

Answer 4

Why don't just remember that the order goes clockwise starting from the TOP:

TOP -> RIGHT -> BOTTOM -> LEFT

Penstemon

Answer 5

Another attempt:

Tyrannosaurus Rex : Big Lizard

Lollis

Answer 6

The Really Big Lebowski

Lollis

Answer 7

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...)

Soubriquet

Answer 8

T R o u B L e.

Barmecidal

Answer 9

Timewise Rotation, Bit Lame?

Lollis

Answer 10

Try Roast Beef Leftovers ?

Lollis

Answer 11

The clock trick works for the 4 number shortcut, but is there any logic to the 3 and 2 number shortcuts? 1 number and it applies to everything, and that makes sense, but

1 = (T/R/b/l) 
2 = (T=b) (R=l)   
3 = (T) (R=l) (b)  
4 = (T) (R) (b) (l)

It just doesn't seem logical at all. But... First value pertains to Top, Second pertains to the Right, Third is the bottom and Fourth is the left; A number is not specified if it's the same as its opposite. Horizontal and vertical MUST be declared unless all values are identical.

In other words, you always specify the Top and Right values, bottom and left fall in as required.

Chickasaw

Answer 12

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

Teniafuge

Answer 13

TROUBLE is always a secondary reminder for me, since I first think of the clockwise direction but might need to remember where you start; however, the 3-value shorthand was always confusing me until I realized the middle, (or second) value needs to represent two values (the sides). So, three values - the 2nd being 2 values - helps me remember that.

Caligula

Answer 14

TRouBLe is best for me. And if only 3 values are shown, it's Top, Sides, Bottom - which for UK users spells TSB (the bank the government had to bail out using our money) - so TRouBLe and TSB are closely linked!

Diestock

Answer 15

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.

Unstriped

Answer 16

Remember driving lesson:

Turn Right Before Left

Celluloid

Answer 17

*T*op *R*amen, *B*ottom, *L*unch

Brandybrandyn

Answer 18

Theres always the town of TRumBuLl Connecticut

Aspinwall

Answer 19

It is

top
right 
bottom 
left

not what you have

Think Right Before you Leap

Whitcomb

There is an extra "you". – Sericin

Answer 20

T he

R omans

B rought

L atin

(among some other things...).

Beaman

Answer 21

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

Sauter

Answer 22

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.

Ppi

Answer 23

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.

Marrano