HTML and CSS Reference
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:
This has exactly the same meaning as the following:
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.
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
Sets the top margin of an element.
Sets the right margin of an element.
Sets the bottom margin of an element.
Sets the left margin of an element.
Shorthand property. Accepts between one and four values.