CSS Padding

Jun 28, 2019

Learn how the CSS padding property adds space inside an element border, with padding-top, right, bottom and left, and how the shorthand changes by value count.

~~~

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

Remember:

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.

Tagged: CSS · All topics

~~~