CSS padding Property
CSS padding property sets the padding for the HTML element on all the four sides.
padding is a short hand property to specify padding-top, padding-right, padding-bottom, and padding-left values in a single shot.
padding property can be assigned with one, two, three, or four values.
padding: 35px 25px 45px 65px; padding: 35px 25px 45px; padding: 35px 25px; padding: 35px;
We shall go through each of these scenarios with examples.
padding with four values
An example for padding property set with four values.
padding: 35px 25px 45px 65px;
where the order of sides is top, right, bottom, and left respectively, as shown in the following.
padding: 35px 25px 45px 65px; /* top right bottom left */
Example
The computed values for the HTML Element in the browser’s developer console would be as shown in the following. Observe the padding section marked in green color.
![](https://www.tutorialkart.com/wp-content/uploads/2021/09/css-padding-1.png)
padding with three values
An example for padding property set with three values.
padding: 35px 25px 45px;
where the order of sides is top, right, and bottom respectively. For left, the value for right is considered, as shown in the following.
padding: 35px 25px 45px; /* top right bottom */ /* left */
Example
![](https://www.tutorialkart.com/wp-content/uploads/2021/09/css-padding-2.png)
padding with two values
An example for padding property set with two values.
padding: 35px 25px;
where the first value is for top and bottom side padding, and the second value is for right and left side padding, as shown in the following example.
padding: 35px 25px; /* top right */ /* bottom left */
Example
![](https://www.tutorialkart.com/wp-content/uploads/2021/09/css-padding-3.png)
padding with one value
An example for padding property set with only one value.
padding: 35px;
where the specified value is set as padding for all sides: top, right, bottom, and left, as shown in the following.
padding : 35px; /* top */ /* right */ /* bottom */ /* left */
Example
![](https://www.tutorialkart.com/wp-content/uploads/2021/09/css-padding-4.png)
Conclusion
In this CSS Tutorial, we learned about padding property, and how to use this property for HTML Elements, with examples.