The CSS padding property is used to set spaces inside of an element. We can set the padding of an element for all the 4 side altogether or individually.

There are four CSS properties available to set padding individually for particular side.

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

The padding values we can provide in px, rem, pt, %, cm, auto, inherit etc.

.element {
     padding-top: 50px;
     padding-right: 10px;
     padding-bottom: 30px;
     padding-left: 40px;
 }

To set the padding for all the 4 side together, we can use the shorthand padding property of CSS. The padding property can take either 4 values or 3 values or 2 values or 1 value separated by spaces.

If the padding has 4 values, that means the 1^st value is padding-top, 2^nd is padding-right, 3^rd is padding-bottom and 4^th is padding-left.

padding: 50px 10px 30px 40px;

This is same as:

padding-top: 50px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 40px;

If the padding has three values, that means the 1^st value is padding-top, 2^nd value is both padding-right and padding-left, 3^rd value is padding-bottom.

padding: 50px 10px 30px;

This is same as:

padding-top: 50px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;

If the padding has two values, that means the 1^st value is both padding-top and padding-bottom, 2^nd value is both padding-right and padding-left.

padding: 50px 10px;

This is same as:

padding-top: 50px;
padding-right: 10px;
padding-bottom: 50px;
padding-left: 10px;

If the padding has only one value then that value is same for all side padding.

padding: 50px;

This is same as:

padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;

Hope you have got a better clarity on how padding works and how to use it.

Related post: Working with CSS margin.

Amitav Mishra

Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next |  Angular | Vue | HTML | CSS