Friday, 8 October 2010

CSS and showing my age

Okay. I can't be the only one. Surely some of you also have trouble remembering the order of the values in CSS shorthand properties, e.g.:

margin: 10px 20px 30px 40px;
I mean, I'm an engineering kind of guy. I'm used to coordinate systems like (top,left)-(bottom,right) or (x1,y1)-(x2,y2). CSS, however, uses neither. Instead, it's top right bottom left. I expect there's a good reason.

So showing my age, but I just could not keep that in my head. I kept thinking, "if only I understood why they'd done it, maybe I could remember it." But I've gone one better, and am showing my age ^ 2: I'll just remember "tribble".

That's right. Cute furry (and ultimately dangerous) things from Star Trek: The Original Series. "tribble" as in T R B L as in Top Right Bottom Left:

         +----------------- Top
| +------------ Right
| | +------- Bottom
| | | +-- Left
v v v v
margin: 10px 20px 30px 40px;


I suppose I'd be remiss if I opened this topic but didn't mention that you can also specify one, two, or three values, but the mnemonic holds well enough  basically, just remember to start with the T and you'll be okay. Specifically:

         +----------------- (All four)
margin: 10px;

+----------------- Top & Bottom
| +------------ Right & Left
v v
margin: 10px 20px;

+----------------- Top
| +------------ Right & Left
| | +------- Bottom
v v v
margin: 10px 20px 30px;

Right, well, as there are no computers around here to reason into a conflicted meltdown, I guess I'll head off for a Saurian brandy and see if I can chat up an Orion slavegirl. I've always been partial to scantily-clad brunettes with green skin...


PePa said...

:-) I just remember it's clockwise starting from the top (all four values).

T.J. Crowder said...

@PePa: Yeah, I was chatting with Jock Murphy about it, and he said the same thing. For some reason, that just doesn't "click" with me... :-)

JockM said...

Clockwise might not "click," but I guess tribbles "purr" ;)