Padding : Padding Declarations in Css

Padding

 
Padding is the distance between the edges (borders) of an (X)HTML element and the content
within it, and can be applied to any element.

Padding Declarations

 

Both length and percentage values are available, although there is no auto value, and negative
values cannot be declared for padding.
Let’s take the container div again, and this time add custom padding to each side:
/* Basic container */
#container {
width:300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border: 1px solid #000;
padding-top: 20px;
padding-left: 10%;
padding-right: 1em;
padding-bottom: 0;
background: #CCC;
}
Figure 3-7 shows how the paragraph within the container (highlighted by a thin border) is
spaced away from each edge by the given padding value.Percentage in this case refers directly to the parent element’s width. So if padding-left:
10% is declared, that equates to 10% of the parent element’s given width.