A mnemonic for the order of CSS margin and padding

2020-05-11 16:29发布

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 B L R 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.

NOTE: This question gave incorrect information - the order (as noted in some of the comments and answers) is Top Right Bottom Left. (heh, see what I mean? -- dland)

标签: css mnemonics
21条回答
Explosion°爆炸
2楼-- · 2020-05-11 16:42

Timewise Rotation, Bit Lame?

查看更多
疯言疯语
3楼-- · 2020-05-11 16:44

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.

查看更多
【Aperson】
4楼-- · 2020-05-11 16:44

T R o u B L e.

查看更多
唯我独甜
5楼-- · 2020-05-11 16:45

Try Roast Beef Leftovers ?

查看更多
smile是对你的礼貌
6楼-- · 2020-05-11 16:46

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

查看更多
\"骚年 ilove
7楼-- · 2020-05-11 16:47

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!

查看更多
登录 后发表回答