CSS Padding

How to work with padding in CSS

The padding CSS property is commonly used in CSS to add space in the inner side of an element.


  • margin adds space outside an element border
  • padding adds space inside an element border

Specific padding properties

padding has 4 related properties that alter the padding of a single edge at once:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

The usage of those is very simple and cannot be confused, for example:

padding-left: 30px;
padding-right: 3em;

Using the padding shorthand

padding is a shorthand to specify multiple padding values at the same time, and depending on the number of values entered, it behaves differently.

1 value

Using a single value applies that to all the paddings: top, right, bottom, left.

padding: 20px;

2 values

Using 2 values applies the first to bottom & top, and the second to left & right.

padding: 20px 10px;

3 values

Using 3 values applies the first to top, the second to left & right, the third to bottom.

padding: 20px 10px 30px;

4 values

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left.

padding: 20px 10px 5px 0px;

So, the order is top-right-bottom-left.

Values accepted

padding accepts values expressed in any kind of length unit, the most common ones are px, em, rem, but many others exist.

Download my free CSS Handbook!

Check out my Web Development Bootcamp. Next cohort is in April 2022, join the waiting list!