HTML and CSS Reference
In-Depth Information
border: 2px solid #999;
margin: 20px;
}
#padded {
padding: 20px;
}
■
Note
Backgrounds and borders are covered in depth in
Chapters 8
and
9
.
Specifying Padding
Padding can be added to almost any element. However, the only table elements that can have padding are the
table itself and individual table cells. Table
6-3
lists the properties used for padding.
Table 6-3.
CSS Padding Properties
Property
Initial Value
Inherited
Description
padding-top
0
No
Adds padding to the top of an element.
padding-right
0
No
Adds padding to the right of an element.
padding-bottom
0
No
Adds padding to the bottom of an element.
padding-left
0
No
Adds padding to the left of an element.
padding
0
No
Shorthand property. Accepts between one
and four values.
All properties listed in Table
6-3
accept a length, such as
px
or
em
, or a percentage. Negative values are not
allowed. Although padding is never inherited, you can use the keyword
inherit
to apply the same value as the
parent element.
The properties are listed in clockwise order because that's the order used by the shorthand property, which
takes between one and four values. This is how it works:
One value
Applies equally to all four sides.
Two values
The first one applies to the top and bottom, and the second one to the left
and right.
hree values
The first one applies to the top, the second one to the left and right, and
the third one to the bottom.
Four values
The values are applied in clockwise order starting from the top.
Confused? Don't be. Take my advice, and forget about using three values. Concentrate on one, two, and four.
The way to remember the rest is simple:
•
Always start at the top.
•
Go clockwise.
