HTML and CSS Reference
Figure 19-1. 1-to-4-value syntax explained
For instance, if two values are specified, the first value sets the top and bottom
padding, and the second value sets the right and left padding. This gives an even shorter
way of writing the previous example.
padding: 10px 0;
Keep in mind that the padding is part of the element's background and is affected by
the background properties, whereas the margin is always transparent.
The margin is the space around an element's border and is set using the margin properties
listed as follows. These properties are not inherited and can be applied to any element, with
the exception that vertical margins do not affect nonreplaced inline elements.
margin (1-4) | margin-top | margin-right |
margin-bottom | margin-left:
<length> | <percentage> | auto
Margin and padding can both use percentage values, which are relative to the
width and height of the containing element. In contrast with padding, margins can be
negative, which allows for element areas to overlap. The auto keyword lets the browser
automatically calculate the margin.
Like the padding and border properties, the margin property can be set with one to
four values. For example, in the following declaration, the top-bottom margins will be
1 cm, and the right-left margins will be 0:
margin: 1cm 0;
The margin property also has four subproperties, which provide a more verbose
method for setting the margin on each of the four sides.