In this article, we will learn about padding in CSS.

Padding in CSS

The padding property is used to specify the space between an HTML element’s content and its defined border. It is different from margin as it defines the space around the element outside the border.

The padding is transparent in nature but is affected by the element’s background color and so if the elements have any background color then the padding will also have the same background color. Negative values of padding are not allowed.

We can change the top, bottom, left, and right paddings independently using separate properties. and also we can change all these properties at once using the shorthand padding property.

The properties of padding are as follows:

S.no.	Property	Description
1.	padding-top	This property is used to specify the top padding of an element.
2.	padding-bottom	This property is used to specify the bottom padding of an element.
3.	padding-left	This property is used to specify the left padding of an element.
4.	padding-right	This property is used to specify the right padding of an element.
5.	padding	This property is a shorthand property for all four paddings and is used to declare all the paddings of an element at once.

The padding properties have the following values:

S.no.	Value	Description
1.	length	this is used to specify the padding in px, pt, cm, etc.
2.	%	used to define the padding in % of the width of the element.
3.	inherit	used to inherit the padding from its parent element.

For Example:

p {
   padding-top: 40px;
   padding-bottom: 65px;
   padding-left: 50px;
   padding-right: 100px;
   background-color:green;
   }

Output:

Shorthand property of Padding:

This property is used to shorten the code and specify all four paddings at once using the padding property.

For Example:

p {
   padding: 40px;
   background-color:green;
   }

Output:

If the padding property has four values:

padding: 40px 15px 75px 50px;

Then,

• top padding: 40px
• right padding: 15px
• bottom padding: 75px
• left padding: 50px

For Example:

p {
   padding: 40px 15px 75px 50px;
   background-color:green;
   }

Output:

If the padding property has 3 values:

padding: 70px 45px 25px;

Then,

• top padding: 70px
• right and left padding: 45px
• bottom padding: 25px

For Example:

p {
   padding: 70px 45px 25px;
   background-color:green;
   }

Output:

If the padding property has 2 values:

padding: 80px 55px;

Then,

• top and bottom padding: 80px
• right and left padding: 55px

For Example:

p {
   padding: 80px 55px;
   background-color:green;
   }

Output:

That’s all about the Padding in CSS.

Hope this article will guide you to recognize all about the Padding in CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.