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;}
/*
       top
       20px
left         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?”

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

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now
Close