Margin and padding properties Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").
The clock (or clockwise direction) can be used as a mnemonic to remember the shorthand notation with four values.
In order, it specifies the margin-top value ( 6px ), the margin-right value ( 10px ), the margin-bottom value ( 5px ), and the margin-left value ( 12px ) of the content.
If you don't get it right, there will be TRouBLe
Actually the clock thing works perfectly. It is the most intuitive way to remember it, at least for me.
Tricky Rectangle Border Logic ?
Why don't just remember that the order goes clockwise starting from the TOP:
TOP -> RIGHT -> BOTTOM -> LEFT
Another attempt:
Tyrannosaurus Rex : Big Lizard
Just think clockwise, it's the easiest way. Starts at the top and goes around... much easier to remember than some silly phrase (provided you know how to read a clock...)
The Really Big Lebowski
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With