CSS Helper: Trouble (TRBL)
Brian’s previous post reminded me about a mnemonic I use to remember how CSS borders/margins/paddings are defined (surely there’s a word for what I’m describing). Anyway, in a declaration such as:
#wrapper {
margin: 0px 0px 0px 0px;
}
The margin-top, margin-right, margin-bottom, and margin-left are all 0px, and are defined in that order.
To remember this, I think of TRBL: top, right, bottom, and left. Trouble. Not that you’ll be having any trouble if you remember it that way.
Additionally, you can define just two of the four and have your browser substitute them for the remaining two. That is,
#wrapper {
margin: 5px 0px;
}
This creates a margin of 5px on top, 0px on right, and then substitutes to make the bottom 5px and the left 0px also. Most everyone is familiar with defining just one and having that be used for all four also.



Ha, are you the one who told me that or vice versa? Cause thats totally how I remember it, hell I still say it in my head everytime. T, R, B, L…. top, right, bottom, left.
I never told you that, and you never told me. It’s probably a totally newbie thing and everyone knows. I thought I was clever as hell though.