: Remembering CSS left, top, right, bottom 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

@Martha676

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

Vote Up Vote Down

@Jennifer507

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

Vote Up Vote Down

@Shanna517

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.

Vote Up Vote Down

@Heady270

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

Vote Up Vote Down

@Sarah324

They all go clockwise, starting from top.

Vote Up Vote Down