Remembering CSS left, top, right, bottom

Question

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.

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. — Mâtt Frëëman, May 21 '11 at 03:17
I wonder why nobody mentioned North, East, South, West. It's equivalent to clockwise, but hey :). — Kevin, May 21 '11 at 11:07

score 24 · Accepted Answer · edited May 20 '11 at 21:32

24

They all go clockwise, starting from top.

edited May 20 '11 at 21:32

Su'

19,332
3
41
65

answered May 20 '11 at 20:35

John Conde

86,255
27
146
241

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 06:50
@Marcel, very true, which explains why I always get that one wrong the first time. – John Conde May 21 '11 at 06: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 01 '13 at 20:36

score 20 · Answer 2 · answered May 21 '11 at 01:50

20

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

answered May 21 '11 at 01:50

Ray Mitchell

486
5
13

Bah, beaten to the punch. A sporting +1. – Jon Purdy May 21 '11 at 01:51

score 8 · Answer 3 · answered May 20 '11 at 20:36

8

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

answered May 20 '11 at 20:36

Nick

20,466
4
44
81

score 5 · Answer 4 · answered May 21 '11 at 01:50

5

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.

answered May 21 '11 at 01:50

Jon Purdy

151
3

1

CRAP. Well done, sir – Ray Mitchell May 21 '11 at 01:57

score 2 · Answer 5 · edited Jun 16 '20 at 10:32

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:

all
top&bottom right&left
top right&left bottom
top right bottom left

is second nature. Just like:

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

and

background: <color> <image> <repeat> <attachment> <position>;

Remembering CSS left, top, right, bottom

5 Answers5

practice