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.

Im forever forgetting and google seems populated with crap like w3school

Answer 1

They all go clockwise, starting from top.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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