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.

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. — mahemoff, Mar 25 '12 at 23:58
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. — Harry Pehkonen, Jul 08 '15 at 14:23
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. — Eric Bishard, Aug 27 '15 at 07:02

Paul Dixon · Accepted Answer · 2008-12-10T17:16:24.353

184

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

edited Dec 10 '08 at 17:16

answered Dec 10 '08 at 16:59

Paul Dixon

295,876
54
310
348

9

No TRouBLe to remember if you remove vowels – zzapper Feb 28 '14 at 17:50
5

@zzapper: OUch --- EEEks. I got it wrong and removed the consonants. – Yaakov Belch Apr 08 '14 at 10:38
https://css-tricks.com/remember-the-order-of-marginpadding-shorthand-with-trouble/ – Ryan Williams Jul 31 '18 at 07:51

score 78 · Answer 2 · answered Dec 10 '08 at 17:01

78

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

answered Dec 10 '08 at 17:01

Yuval Adam

161,610
92
305
395

1

And it works pictorially too... most of the time, you're going to thinking along visual lines anyhow. – Armstrongest Dec 10 '08 at 22:37

score 25 · Answer 3 · answered Dec 10 '08 at 17:05

25

Tricky Rectangle Border Logic ?

answered Dec 10 '08 at 17:05

Paul Dixon

295,876
54
310
348

1

I haven't heard that one before, but I like it :) – Adam Rezich Dec 10 '08 at 17:06

score 21 · Answer 4 · answered May 25 '12 at 21:17

21

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

TOP -> RIGHT -> BOTTOM -> LEFT

answered May 25 '12 at 21:17

Stephane

4,978
9
51
86

score 16 · Answer 5 · answered Dec 10 '08 at 17:03

16

Another attempt:

Tyrannosaurus Rex : Big Lizard

answered Dec 10 '08 at 17:03

Paul Dixon

295,876
54
310
348

score 13 · Answer 6 · answered Dec 10 '08 at 17:19

13

The Really Big Lebowski

answered Dec 10 '08 at 17:19

Paul Dixon

295,876
54
310
348

score 12 · Answer 7 · answered Dec 10 '08 at 17:06

12

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

answered Dec 10 '08 at 17:06

Logan Serman

29,447
27
102
141

score 8 · Answer 8 · answered Dec 10 '08 at 17:00

8

T R o u B L e.

answered Dec 10 '08 at 17:00

Adam Rezich

3,122
6
31
39

score 8 · Answer 9 · answered Dec 10 '08 at 17:15

8

Timewise Rotation, Bit Lame?

answered Dec 10 '08 at 17:15

Paul Dixon

295,876
54
310
348

score 6 · Answer 10 · answered Dec 10 '08 at 17:07

6

Try Roast Beef Leftovers ?

answered Dec 10 '08 at 17:07

Paul Dixon

295,876
54
310
348

score 4 · Answer 11 · answered Dec 10 '08 at 20:07

4

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

answered Dec 10 '08 at 20:07

Ian G

29,468
21
78
92

score 4 · Answer 12 · answered Aug 19 '16 at 11:30

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.

score 2 · Answer 13 · answered Feb 08 '14 at 16:25

2

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!

answered Feb 08 '14 at 16:25

Toby

1
1

score 2 · Answer 14 · answered Apr 21 '14 at 06:53

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.

score 2 · Answer 15 · answered Dec 10 '08 at 17:12

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.

score 1 · Answer 16 · answered Jan 30 '14 at 01:01

1

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

answered Jan 30 '14 at 01:01

David Horne

451
4
4

Ian G · Answer 17 · 2008-12-10T20:04:36.293

1

~~It is~~

top
right 
bottom 
left

not what you have

Think Right Before you Leap

edited Dec 10 '08 at 20:04

answered Dec 10 '08 at 17:00

Ian G

29,468
21
78
92

There is an extra "you". – Ziyuan Jan 14 '14 at 20:42

score 1 · Answer 18 · answered May 30 '16 at 06:18

1

Remember driving lesson:

Turn Right Before Left

answered May 30 '16 at 06:18

guest

1
1

score 1 · Answer 19 · answered Apr 27 '09 at 14:22

1

Theres always the town of TRumBuLl Connecticut

answered Apr 27 '09 at 14:22

score 0 · Answer 20 · answered Aug 05 '18 at 21:22

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.

R K · Answer 21 · 2019-02-28T21:54:28.067

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.

score 0 · Answer 22 · answered Jun 13 '20 at 14:14

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

TROUBLE (TROUBLESHOOT,TROUBLESOME)
TERRIBLE
TRIBBLE
The Royal British Legion
Tobacco Road Basketball League
Temporary Revenue Borrowing Limit
Transformational Rule-Based Learning

score 0 · Answer 23 · answered Nov 16 '22 at 11:48

0

T he

R omans

B rought

L atin

(among some other things...).

answered Nov 16 '22 at 11:48

Gorgsenegger

7,356
4
51
89

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

23 Answers23

Linked