HTML and CSS Reference
In-Depth Information
Chapter 19
Margin and padding
Margins and padding are used to adjust the position of an element and to create space
around it.
Padding
Padding is the space between an element's content and its border. It is set using the
padding properties shown here. These properties do not inherit and can be applied to
any element.
padding (1-4) | padding-top | padding-right |
padding-bottom | padding-left :
<length> | <percentage>
There are four properties for setting the padding on each side individually. In the
following example, the vertical (top, bottom) margins will be 10 pixels, and the horizontal
(right, left) margins will be zero.
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
These declarations can be shortened to a single declaration using the
padding
property. The padding values are then specified in clockwise order: top, right, bottom,
and left.
padding: 10px 0 10px 0;
Like many other properties related to the box model, the
padding
property can be set
with one to four values that correspond to the edges of the element's box. With fewer than
four values, the padding is repeated as is shown in Figure
19-1
.
