New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#padding

default padding: 0;

Removes all paddings.

padding: 30px;

When using 1 value, the padding is set for all 4 sides.

padding: 30px 60px;

When using 2 values:

  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

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.

padding: 30px 60px 45px;

When using 3 values:

  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

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

padding: 30px 60px 45px 85px;

When using 4 values:

  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.