The Padding Properties

The padding properties describe how much space to insert between an element and its margin, or if there is a border, between an element and its border. (We discuss borders next.) There are five padding properties, and you set the length of the padding with one of them. Four let you set the amount of padding to insert on the left, right, top, and bottom individually: padding-left, padding-right, padding-top, and padding-bottom.

The fifth one padding is a shortcut by which you can set all four padding values in one step.

All these properties can be described by the following definition, except that only padding can have up to four values, the others can have only one.

Name:	padding
Value:	[<length> | <percentage>] {1,4}
Initial:	0
Applies to:	all elements
Inherited:	no
Percentages:	refer to width of containing block

Name:	padding-top, padding-right, padding-bottom, padding-left
Value:	<length> | <percentage>
Initial:	0
Applies to:	all elements
Inherited:	no
Percentages:	refer to width of containing block

The properties can have one of two types of values. The default is 0, and the values cannot be negative:

• Length Either an absolute or relative value.

• Percentage A percentage of the width of the block-level element in which this element is contained; usually the parent element; for example, 10% adds padding that is as wide as 10% of the width of the parent element.

With these properties, you can add some breathing room around an element. For example, although you can place a border right against the bounding box of an element, we recommend that you always put some padding between the element and its border; otherwise, they look like they crowd each other.

The padding automatically takes on the same appearance as an element's background. (You set the background using the background property, which we discuss in Chapter 10, "Colors.") That is, if an element has a yellow background, the padding is also yellow.

Figure 8.7 shows an example of using padding to put space between an element and its margin.

Figure 8.7. An element with padding around it (padding: 1em).