CSS Padding use for make a specific space inside in border. CSS Padding alternate of Margin. Because Margin also make specific space outside border, and Padding make inside border space.

Output

Padding make space between two div or any HTML tag inside

Padding make space between two div or any HTML tag inside

Padding make space between two div or any HTML tag inside

Kinds of CSS Padding

1) Padding Top

How to use CSS Padding top?

Ans: Use only padding-top and give his value. Then padding effect only top side of HTML tag. Where used padding top.

p {
     padding-top: 20px;
}

2) Padding Bottom

How to use CSS Padding Bottom?

Ans: Use only padding-bottom and give his value. Then padding effect only bottom side of HTML tag. Where used padding bottom .

p {
     padding-bottom: 20px;
}

3) Padding Left

How to use CSS Padding Left?

Ans: Use only padding-left and give his value. Then padding effect only left side of HTML tag. Where used padding left.

p {
     padding-left: 20px;
}

Copy code and try to Editor

Copy code and try to Editor

4) Padding Right

How to use CSS Padding Right?

Ans: Use only padding-right and give his value. Then padding effect only right side of HTML tag. Where used padding right.

p {
     padding-right: 20px;
}

Copy code and try to Editor

5) Padding (You can use only padding for all side padding use.)

How to use CSS Padding?

Ans: Use only padding and give his value. Then this padding effect all side of HTML tag. Where used padding.

p {
     padding: 20px;
}

Copy code and try to Editor

6) Padding 4 side value (You can use only padding: 10px 0px 5px 10px; 

Where 1st 10px value is top side padding, 2nd 0px value is right side padding, 3rd 5px value is bottom side padding and 4th 10px value is left side marign. )

How to use CSS Padding 4 side value?

Ans: Use only padding and give his value padding:0px 0px 0px 0px;. Then this padding effect all side of HTML tag. Where used padding.

p {
     padding: 20px 10px 30px 0px;
}

7) Padding 3 side value (You can use only padding: 10px 0px 5px; Where 1st 10px value is top side padding, 2nd 0px value is right side padding, 3rd 5px value is bottom side padding. )

How to use CSS Padding 3 side value?

Ans: Use only padding and give his value padding:0px 0px 0px;. Then this padding effect 3 side of HTML tag. Where used padding.

p {
     padding: 20px 10px 30px;
}

8) Padding 2 side value (You can use only padding: 10px 0px; Where 1st 10px value is top side padding, 2nd 0px value is right side padding.)

How to use CSS Padding 2 side value?

Ans: Use only padding and give his value padding:0px 0px;. Then this padding effect 2 side of HTML tag. Where used padding.

p {
     padding: 20px 10px;
}

9) Padding 1 side value (You can use only padding: 10px; Where 10px value is all side padding.)

How to use CSS Padding 2 side value?

Ans: Use only padding and give his value padding:0px;. Then this padding effect all side of HTML tag. Where used padding.

p {
     padding: 20px;
}

10) Padding Auto

How to use CSS Padding Auto?

Ans: Use only padding and give his value padding:auto;. You can set the padding property to auto to horizontally center the element within its container.

p {
     padding: auto;
}

11) Padding Inherit

How to use CSS Padding Auto?

Ans: Use only padding and give his value padding:auto;. The inherit padding lets the left padding be inherited from the parent element.

p {
     padding: inherit;
}

You may like CSS Margin Tutorial

Output

Padding make space between two div or any HTML tag inside

Padding make space between two div or any HTML tag inside

Padding make space between two div or any HTML tag inside

---

Video Tutorial coming soon...