6.8
CSS size shorthand wheel

A circle shorthand method

Setting 4 values

When all 4 sides (top, bottom, left and right) are involved in a CSS property, that CSS property also acts as a shorthand property.

For example, the padding property can be used on its own to apply the same value to all 4 sides, but also comes in 4 variations (padding-top, padding-bottom, padding-left and padding-right) to target a specific side.

blockquote{padding:20px;}/* Is equivalent to */blockquote{padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;}

But where the padding property becomes interesting, is that it can get up to 4 values. You can thus set a different value for all sides at once:

blockquote{padding:20px010px50px;}

The order is top, right, bottom and left.

Setting 2 or 3 values

By putting 2 values, the first one will be applied for top and bottom, the second one for right and left:

blockquote{padding:20px0;}/* top 20pxleft right 0 0 bottom 20px*/

How to remember the shorthand order

There’s an easy way to remember which value will be applied.

Instead of focusing on the values you’ve entered, think about the values you havent’.

if you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

if you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

Other properties that can act as “wheel” shorthands

Any property that applies to all 4 sides:

margin

padding

border-width

“So border is a shorthand property that includes border-width which is another shorthand property?”