by
Join the DZone community and get the full member experience.
Join For FreeWhenever one specifies values for all directions in a single CSS property, one has to adhere to the standard order: top comes first, right second, bottom third, and left fourth. This post mentions three mnemonics for remembering that order.
Example: The four CSS properties
margin-top: 10;
margin-bottom: 9;
margin-left: 5;
margin-right: 4;
can be written as a single property:
margin: 10 4 9 5;Other examples are border and padding. Three suggestions for remembering the order:
- tar ball: is a mnemonic for trbl, the first characters of top, right, bottom, left.
- trouble: an alternative to tar ball, suggested by Josh Feuerstein and Rick Waldron.
- clockwise: means that you enumerate the sides of a rectangle, starting at 12 o’clock, continuing clockwise. Suggested by Franz Graf.
margin: 10 4 9 5; /* trbl */
CSS
Opinions expressed by DZone contributors are their own.
Comments