Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

A mnemonic for the order of CSS margin and padding shorthand properties

Tags:

css

mnemonics

People also ask

What is the order of the margin and padding CSS shorthand syntax?

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

When using shorthand properties like padding border and margin which mnemonic can help you remember the order the values need to be provided?

The clock (or clockwise direction) can be used as a mnemonic to remember the shorthand notation with four values.

What is the shorthand order of specifying margins?

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