Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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
6  
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
8  
@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. –  mattcodes May 21 '11 at 3:17
2  
I wonder why nobody mentioned North, East, South, West. It's equivalent to clockwise, but hey :). –  Kevin May 21 '11 at 11:07
add comment

5 Answers

up vote 23 down vote accepted

They all go clockwise, starting from top.

share|improve this answer
4  
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
add comment

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
add comment

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
add comment

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
1  
CRAP. Well done, sir –  Ray Mitchell May 21 '11 at 1:57
1  
+1 for feeding us with CRAP! –  Trufa May 21 '11 at 5:05
add comment

practice

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>;

and

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

Your Answer

 
discard

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.