Mnemonics for remembering the CSS order of top right bottom left
Mnemonics for remembering the CSS order of top right bottom left
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Whenever 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 */
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}