B.79. padding

This shorthand property sets the size of the padding surrounding the selected element(s) on all four sides with a single property declaration. Padding is extra space added around the content of an element, but within its borders. Any background color or image assigned to an element will also fill the padding area of the element.

The amount of padding for each side may be set individually using the padding-bottom, padding-left, padding-right, and padding-top properties.

Inherited: No

See also: Section B.80padding-bottom, Section B.80padding-left, Section B.80padding-right, Section B.80padding-top

B.79.1. Value

You can specify from one to four different values to specify different padding sizes for each side of the element, as shown in Table B-8.

Each value can be a CSS length (px, pt, em, etc.), or a percentage of the parent element's width, even for the top and bottom paddings.

Table B-8. Effects of multiple values on padding property

Number of values	Effect on padding
1	All four sides receive the value specified.
2	Top and bottom (horizontal) paddings receive the first value, left and right (vertical) paddings receive the second.
3	Top padding receives the first value, vertical paddings receive the second, bottom padding receives the third.
4	Values are applied to top, right, bottom, and left paddings, respectively.

Initial value: 0

B.79.2. Compatibility

CSS Version: 1

Works in all CSS-compatible browsers, including Internet Explorer 4 and Netscape 4.

On any element with a border, Netscape 4 adds an extra 3 pixels of padding on all four sides of the element outside the normal padding area. This three-pixel space cannot be removed, and unlike the padding area, is transparent even when a background is assigned to the element. The Section B.53layer-background-color and Section B.53layer-background-image properties will allow you to fill the area in most cases; however, you'll still need to deal with the extra padding.

B.79.3. Examples

This style rule adds a thin border and red background around elements of class warning. It also adds 5 pixels of padding on the top and bottom and 10 pixels of padding on the left and right, between the content and the borders, to allow the content to breathe a little:

.warning {
  border: 1px solid;
  background-color: red;
  padding: 5px 10px;
}

This style rule sets a padding of 3 pixels around all cells in tables of class spacy. This is the CSS equivalent of cellpadding="3" in the <table> tag.

table.spacy td, table.spacy th {
  padding: 3px;
}