saftutorials.com
CSS Padding Tutorial

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;
}


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;
}


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;
}


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 5pxWhere 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 0pxWhere 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: 10pxWhere 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...

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic