Chapter 8: CSS Padding
Inherited:
No
Padding is the
distance between the border of an (X)HTML element and the content within it.
Most of the rules
for margins also apply to padding, except there is no "auto"
value, and negative values cannot be declared for padding.
padding-top: length
percentage;
padding-left: length
percentage;
padding-right: length
percentage;
padding-bottom: length percentage;
As you can also see
in the above example you have 2 choices of values for the padding property
·
length
·
percentage
You can also
declare all the padding of an element in a single property as follows:
padding: 10px 10px 10px 10px;
If you declare all
4 values as I have above, the order is as follows:
1. top
2. right
3. bottom
4.
left
If only one value is declared, it sets
the padding on all sides. (see below)
padding: 10px;
If you only declare
two or three values, the undeclared values are taken from the opposing side.
(see below)
padding: 10px 10px; /*
2 values */
padding: 10px 10px 10px; /* 3 values */
If you do not
declare the padding value of an element, the padding is 0 (zero).
Note: You do not
have to add px (pixels) or whatever units you
use, if the value is 0 (zero).
You can see in the
example below, the main container for this site has 30px (pixels) of padding
between the border and the text.
#container
{
width: 70%;
margin: auto;
padding: 30px;
border: 1px solid #666;
background: #ffffff;
}