You are currently viewing Padding in CSS | Web Development

Padding in CSS | Web Development

In this article, we will learn about the 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.PropertyDescription
1.padding-topThis property is used to specify the top padding of an element.
2.padding-bottomThis property is used to specify the bottom padding of an element.
3.padding-leftThis property is used to specify the left padding of an element.
4.padding-rightThis property is used to specify the right padding of an element.
5.paddingThis 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.ValueDescription
1.lengththis 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.inheritused 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:

Heading

This is a paragraph with padding top 40px, padding bottom 65px, padding left 50px, and padding right 100px.

This is a normal paragraph

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:

Heading

This is a paragraph with padding of 40px on each side.

This is a normal paragraph

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:

Heading

This is a paragraph with padding top 40px, padding right 15px, padding bottom 75px, and padding left 50px.

This is a normal paragraph

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:

Heading

This is a paragraph with padding top 70px, padding right and left 45px, and padding bottom 25px.

This is a normal paragraph

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:

Heading

This is a paragraph with padding top and bottom 80px, and padding right and left 55px.

This is a normal paragraph

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 problem or queries regarding this, post them in the comments section and we will be glad to assist you.

This Post Has One Comment

Leave a Reply