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

css mnemonics
dland picture dland · Dec 10, 2008 · Viewed 28.2k times · Source

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)

Answer

Paul Dixon picture Paul Dixon · Dec 10, 2008

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

Related questions

How to remember in CSS that margin is outside the border, and padding inside

I don't edit CSS very often, and almost every time I need to go and google the CSS box model to check whether padding is inside the border and margin outside, or vice versa. (Just checked again and padding is …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More