HTML and CSS Reference
In-Depth Information
If there's only one value, it's easy—it applies to the top and all other sides.
If there are two values, the first one applies to the top. Then, going clockwise, the next one applies to the right
side. The same two values are repeated in the same order as you continue going round the clock. So, the first one
is applied to the bottom, and the second one to the right.
If there are four values, you start at the top, and go clockwise to the right, bottom, and left. Some designers
use the mnemonic
TR
ou
BL
e to remember this, but I think that clockwise is much simpler.
The styles in comparison.html use the shorthand version like this:
#padded {
padding: 20px;
}
This has exactly the same meaning as the following:
#padded {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
I think you'll agree that the shorthand version is much simpler to write. Once you get used to the shorthand,
it also tends to be a lot easier to read. In this example, I've listed the properties in clockwise order, but the order is
not important when setting padding for individual sides.
■
When using percentage values for padding, the values are based on the width of the
parent
element—
even for top and bottom padding. For example, if you have a paragraph that's
400px
wide, specifying padding as
10%
does not add
40px
of padding on the left and right. The actual amount depends on how wide the containing element
is. if there is no containing element, the padding is 10 percent of the width of the page.
Caution
Specifying Margins
Specifying margins is very similar to padding. There are separate properties to control the margin independently
on each side of an element, as well as a shorthand property. They're listed in Table
6-4
.
Table 6-4.
CSS Margin Properties
Property
Initial Value
Inherited
Description
margin-top
0
No
Sets the top margin of an element.
margin-right
0
No
Sets the right margin of an element.
margin-bottom
0
No
Sets the bottom margin of an element.
margin-left
0
No
Sets the left margin of an element.
margin
0
No
Shorthand property. Accepts between one and four values.
