HTML and CSS Reference
In-Depth Information
Padding Styles
While setting the default margin size to 0 pixels has made the appearance of page ele-
ments more predictable, it also has resulted in the navigation list crowding the presi-
dent's message. You can increase the gap between them by increasing the padding
around the text of the navigation links. Setting padding is similar to setting margins, with
these separate styles available for specifying the padding space around element content
padding-top:
length
;
padding-right:
length
;
padding-bottom:
length
;
padding-left:
length
;
and the following style to set all of the padding spaces within one property:
padding:
top right bottom left
;
As with the
margin
property, you can specify any or all of the four padding values.
When you specify a single value, it is applied to all four padding values. The style
h1 {padding: 5px;}
sets the padding space around the
h1
heading content to 5 pixels in each direction.
You'll use the reset style sheet to set the default padding for all elements to 0 pixels,
and then you'll set the padding space above and below the navigation list to 15 pixels.
To modify the padding size:
◗
1.
Return to the
cp_reset.css
style sheet file in your text editor. Within the style rule
for default page styles, add the following property (see Figure 4-29):
padding: 0px;
Figure 4-29
Setting the default padding size for every element
by default,
every element
has no padding
◗
2.
Save your changes to the file and return to the
cp_styles.css
file in your text
editor. Within the style rule for list items in the horizontal navigation list, add the
following style (see Figure 4-30):
padding: 15px 0px;
Figure 4-30
Setting the padding of the navigation list items
each list item has 15 pixels
of padding above and
below the content
