Its shorthand padding property It declares all padding properties in one single line. We can set this property to length in the form of %, cm, px etc.
Padding Property–
- padding
- padding-left
- padding-right
- padding-top
- padding-bottom
Padding–
This property is used to set the padding of specified element.
Ex: –
img { padding: 10px 20px 30px 40px;}
![](https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/08/image-9.png)
padding-left–
This property is used to set left padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-left: 20%; }
h1 { padding-left: 40px; }
![](https://server2client.com/images/boxmodeldiagramleftpadding.webp)
padding-right–
This property is used to set right padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-right: 20%; }
h1 { padding-right: 40px; }
![](https://server2client.com/images/boxmodeldiagramrightpadding.webp)
padding-top–
This property is used to set top padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-top: 20%; }
h1 { padding-top: 40px; }
![](https://server2client.com/images/boxmodeldiagramtopmargin.webp)
padding-bottom–
This property is used to set bottom padding of element. We can set this property to length in the form of %, cm, px etc.
Ex: –
img { padding-bottom: 20%; }
h1 { padding-bottom: 40px; }
![](https://server2client.com/images/boxmodeldiagrambottompadding.webp)