Mnemonics for remembering the CSS order of top right bottom left
DZone 's Guide to
Mnemonics for remembering the CSS order of top right bottom left
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 */
Topics:
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}