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-right) to target a specific side.
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:
The order is
Setting 2 or 3 values
By putting 2 values, the first one will be applied for
bottom, the second one for
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
bottomis the vertical counterpart of
top, it will use
top’s value. And because
leftis the horizontal counterpart of
right, it will use
- if you enter 3 values (top/right/bottom), you omit setting
right’s counterpart, it will use its value.
Other properties that can act as “wheel” shorthands
Any property that applies to all 4 sides:
border is a shorthand property that includes
border-width which is another shorthand property?”
border is (in that order) a shorthand for:
However, you can not mix the two:
But you can omit the width in
border and set it separately: