Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

When using CSS what little tricks have you done to remember (perhaps a saying?) the order of left, top, right, bottom when defining combined CSS attributes such as border, margin and padding.

I'm forever forgetting and Google seems populated with crap like W3Schools.

share|improve this question
How is w3schools.com "crap"? It's easier on the eyes to read their CSS3 Reference than the W3C CSS 3 Specification document... – danlefree May 20 '11 at 21:31
@danlefree See W3Fools for a long list of complaints. (Though I'm not aware of them being wrong anywhere as regards this particular question.) – Su' May 20 '11 at 22:03
Danlefee, see Su's response. w3schools is a satan on promoting learning and resources on HTML/CSS/JS. A movement is ongoing to get the crap dropped from page 1 google. – Matt Freeman May 21 '11 at 3:17
I wonder why nobody mentioned North, East, South, West. It's equivalent to clockwise, but hey :). – Kevin May 21 '11 at 11:07
up vote 23 down vote accepted

They all go clockwise, starting from top.

share|improve this answer
Except background positioning (which seems a little relevant in this case), opting for left offset first, then top offset second. – Marcel May 21 '11 at 6:50
@Marcel, very true, which explains why I always get that one wrong the first time. – John Conde May 21 '11 at 6:55
background positioning is ordered for x-y coordinates which is more reasonable when you're using numeric values, rather than left top. – zzzzBov Feb 1 '13 at 20:36

CSS is trouble. T-R-B-L Top-Right-Bottom-Left

share|improve this answer
Bah, beaten to the punch. A sporting +1. – Jon Purdy May 21 '11 at 1:51

I remember it by visualising a clock face: starting at 12 o'clock (top), then moving to 3 o'clock (right), then 6 o'clock (bottom) and finally 9 o'clock (left).

share|improve this answer

In addition to the straightforward winding analogy, I offer another mnemonic: Top, Right, Bottom, Left gives the initialism TRBL, pronounced terrible—or trouble if you like. (Hey, even treble gives me trouble as a baritone.) It fits in well with CRAP (Contrast, Repetition, Alignment, Proximity), the four principles of sound Web design.

share|improve this answer
CRAP. Well done, sir – Ray Mitchell May 21 '11 at 1:57
+1 for feeding us with CRAP! – Trufa May 21 '11 at 5:05


I don't recall ever using any special method of memorization for this little tidbit. I do know I learned they were set in the clockwise order from the top, but then I proceeded to write a lot of CSS.

When you do a task repeatedly there is a tendency to memorize the details for efficiency, so at this point:

  1. all
  2. top&bottom right&left
  3. top right&left bottom
  4. top right bottom left

is second nature. Just like:

border: <width> <style> <color>;


background: <color> <image> <repeat> <attachment> <position>;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.