Cascading Style Sheets Syntax

How to set Padding with CSS

Padding Property, is a function to set the distance between the border with content on an HTML element.
Css padding at crucial point in terms of making web pages, so instead I suggest that you really notice this css syntax.

In writing of the padding property, almost equal to the margin property in writing

Look Examples in below :

1.

div#sidebox {padding:10px;}

Its purpose is to show that the four sides of the selector sidebox are spaced 10 pixels between the border and content.

2.

div#sidebox {padding:10px 20px;}

Intent of the code above is to show that the distance between border and content on the top and bottom of the selector sidebox is 10 pixels while on the left and right is 20 pixels.

3.

div#sidebox {padding:10px 20px 30px 40px;}

or it could be way below:

div#sidebox {padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;}

Intent of the code above is to show that the distance between border and content of the selector sidebox on the top 10 pixels, right 20 pixels, 30 pixels down, and the left is 40 pixels.

4.

div#sidebox {padding-top:10px;}

Intent of the code above is to show that the distance from the border with the content selector sidebox on the top is 10 pixels, while others limit Default value. And besides padding-top, also with the property padding-right, padding-bottom and padding-left.

In addition to the units of px (pixels) can also be a unit emphasis (em) or percentages (%), as an example:

div#sidebox {padding:1em 2%;}