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: 20px 0 10px 50px;}

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: 20px 0;}
left         right
 0             0

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?”

Indeed. border is (in that order) a shorthand for:

  • border-width
  • border-style
  • border-color

However, you can not mix the two:

blockquote{ border: 1px 0 solid green;}
/* Won't work */

But you can omit the width in border and set it separately:

blockquote{ border: solid yellow; border-width: 1px 0;}
Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!