B.80. padding-bottom, padding-left, padding-right, padding-top

These properties let you set sizes of the individual padding sizes around an element. 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.

Inherited: No

See also: Section B.79padding

B.80.1. Value

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

Initial value: 0

B.80.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.54layer-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.80.3. Example

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-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

See the example for the Section B.79padding property to see how this same effect can be achieved with less typing.