Value

The property takes a CSS length (px, pt, em, and so on) or a percentage of the width of the element’s containing block. Note that even for top and bottom padding the percentage value will refer to the width of the containing block. Negative length values are not allowed.

Consider the following example:

.outer {
  width: 600px;
  height: 100px;
  background: blue;
}
.outer p {
  width: 300px;
  padding: 10% 0;
  background: red;
  height: 80%
}

<div class="outer">
  <p>this is a test</p>
</div>

You may have expected the total height of the paragraph to add up to 100 pixels because 80% (height) + 10% (top padding) + 10% (bottom padding) = 100%. However, the paragraph will actually be 200 pixels high, as the percentage values used for the vertical padding are based on the 600px width of the parent element, resulting in values of 60px padding on the top and 60px padding on the bottom. The percentage value used for height is based on the parent elements height, resulting in a value of 80px, which results in a total height for the element of 200px (80 + 60 + 60).

In CSS2.1, if the containing block’s width depends on an element with percentage padding, the resulting layout is undefined.

Compatibility

Internet Explorer versions up to and including 5.5 (and IE6 and IE7 when in quirks mode) incorrectly apply padding inside the stated width, thus reducing the space available for content—see The Internet Explorer 5 Box Model.

Internet Explorer up to and including version 6 will often need a position:relative; declaration added to inline elements in order to show the full amount of vertical padding.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.