padding properties

With cascading style sheets, any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:

padding-top
padding-left
padding-bottom
padding-right
padding

padding-top, padding-left, padding-bottom, padding-right, padding

What it does

The padding properties set the size of the top, left, bottom, right and all paddings respectively.

Possible values

Padding can be specified as either a percentage, a length or using the keyword auto.

Padding can not take negative values. If you want to do this, you probably should be using the margin properties.

Percentages

A percentage padding value sets the affected padding to that percentage of the width of the parent element. For instance, a padding-right: 20% sets the width of the right padding to 20% of the width of the element which contains the element. This is true even for padding-top and padding-bottom.

Length values

We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the padding will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the padding will always be proportional to the calculated size of the content of the element. This is to be encouraged.

Default values

If no padding value is specified, the padding of an element is 0. That is, there is no space between the edge of an element and the contents of the element.

Is it inherited?

An element does not inherit the padding property of the element which contains it.

Hints and suggestions

Padding can be used to achieve similar effects to the positioning properties and margins.

Browser support

Internet Explorer Netscape Navigator Opera WebTV

Windows Macintosh (All Platforms) (All Platforms)

4.0 5.0 5.5 6.0 4.0 4.5 5.0 4.x 6.0 3.5 5.0 1.0

B B Y Y B B Y B Y Y Y N

Padding should be avoided on inline elements if you care about how your pages appear in older browsers. In all 4.0x and 4.5 browsers it either doesn't work at all, or it can cause serious rendering problems. Padding on inline elements works correctly on all the most recent browser versions.
With Netscape Navigator 4.x, although it's actually a background error, note that background color is only drawn behind the content of an element not the whole box including its padding, as it should be.
Workaround: usually applying a {border: none}, along with an explicit width, e.g. width: auto to the elements which you wish to have a solid background will create the desired effect. Note that this triggers another Netscape bug, which causes any elements below those with a border to stop inheriting properties from their predecessors. To work around this bug, instead of having a simple rule that relies on inheritance like this body {...}, use a group selector to ensure each element that needs to inherit style has the style explicitly set, like this body, p, h1, h2, h3 {...}

Netscape Navigator 4.x: padding should not be applied to list items.
Opera 3.6 curiously supports padding correctly on both block and inline elements, except when using the padding shorthand, where it erroneously allows padding on inline elements to affect line heights.
Internet Explorer 4.0x on Windows incorrectly allows negative values for padding-right, which causes the element to have padding on both the left and the right.

<table>, <tr> and <td> elements
This has always had inconsistent support, and this hasn't changed. If you apply padding to <table> elements, only Netscape Navigator 6 draws this correctly, ie extra space outside the border of the table into which the background color of the table also extends. Opera 5 and Internet Explorer 6 Windows does nothing at all. Internet Explorer 5 Macintosh adds the extra space but does not extend the background color.
Even in the most recent browsers, applying a padding to <tr> elements either has strange effects (Opera 5) or no effect at all.
Applying a padding to <td> elements is supported correctly by all the most recent browsers.

next: page layout properties

Internet Explorer							Netscape Navigator		Opera		WebTV
Windows				Macintosh			(All Platforms)		(All Platforms)
4.0	5.0	5.5	6.0	4.0	4.5	5.0	4.x	6.0	3.5	5.0	1.0
B	B	Y	Y	B	B	Y	B	Y	Y	Y	N
Padding should be avoided on inline elements if you care about how your pages appear in older browsers. In all 4.0x and 4.5 browsers it either doesn't work at all, or it can cause serious rendering problems. Padding on inline elements works correctly on all the most recent browser versions. With Netscape Navigator 4.x, although it's actually a background error, note that background color is only drawn behind the content of an element not the whole box including its padding, as it should be. Workaround: usually applying a `{border: none}`, along with an explicit width, e.g. `width: auto` to the elements which you wish to have a solid background will create the desired effect. Note that this triggers another Netscape bug, which causes any elements below those with a border to stop inheriting properties from their predecessors. To work around this bug, instead of having a simple rule that relies on inheritance like this `body {...}`, use a group selector to ensure each element that needs to inherit style has the style explicitly set, like this body, `p, h1, h2, h3 {...}` Netscape Navigator 4.x: padding should not be applied to list items. Opera 3.6 curiously supports padding correctly on both block and inline elements, except when using the `padding` shorthand, where it erroneously allows padding on inline elements to affect line heights. Internet Explorer 4.0x on Windows incorrectly allows negative values for `padding-right`, which causes the element to have padding on both the left and the right. `<table>`, `<tr>` and `<td>` elements This has always had inconsistent support, and this hasn't changed. If you apply padding to `<table>` elements, only Netscape Navigator 6 draws this correctly, ie extra space outside the border of the table into which the background color of the table also extends. Opera 5 and Internet Explorer 6 Windows does nothing at all. Internet Explorer 5 Macintosh adds the extra space but does not extend the background color. Even in the most recent browsers, applying a padding to `<tr>` elements either has strange effects (Opera 5) or no effect at all. Applying a padding to `<td>` elements is supported correctly by all the most recent browsers.