padding (CSS property)

Spec
Inherited Initial Version
No 0 CSS1, 2.1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

padding: { { length | percentage }  1 to 4 values | inherit } ;

Description

The shorthand property padding sets the padding for all four sides of an element using the specified value or values. Each side can have its own value; refer to the mnemonic (TRouBLe) in Shorthand Properties for an easy way to remember the order in which each side is specified for the shorthand property.

Padding is the area that’s sandwiched between an element’s borders and its content. Any background image or background color that’s applied to the element will extend across the padding area. Refer to The CSS Box Model for an in-depth discussion of how padding is accommodated within the CSS box model.

When vertical padding (padding-top and padding-bottom) is used on an inline, non-replaced element, it can cause the overlapping of elements above and below that element in cases where the padding causes the element in question to exceed the line height. See Inline Formatting for more information.

When horizontal padding (padding-left and padding-right) is used on inline, non-replaced elements, it has a different effect than it has on block-level elements. The padding-left value is applied at the start of the inline element, while padding-right is applied at the end of the inline element. If the element is split over two or more line boxes, the right padding wraps to the next line with the element. It doesn’t apply padding to the start and end of each single line, as is the case with block-level elements. See Inline Formatting for more information.

Example

This style rule assigns a two-pixel padding value to the top side, a 4px padding value to the right side, a 6px padding value to the bottom side, and an 8px padding value to the left side of paragraphs within the element with ID "example":

#example p {
  padding: 2px 4px 6px 8px;
}

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. This would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has padding expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent’s width to compute its padding (and hence its dimensions).

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Full Full Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

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.

User-contributed notes

ID:
#3
Contributed:
by Paul O'B
Date:
Tue, 17 May 2011 10:39:39 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Louis the bug with IE8 is documented in the padding-top section but perhaps should be duplicated here for completeness.

[quote]
In Internet Explorer Windows version 8 the margin-top of a child element will collapse onto the parent when the parent's padding-top is specified in percentage. This is incorrect behaviour of course, as the margin-top should not collapse due to the padding-top on the parent. Adding one of the following properties to the parent will stop the collapse; overflowoverflow (other than visible), a display with a value of inline-block, float or border-top. (Note that the same buggy behaviour holds true for margin-bottom and padding-bottom on the aforementioned basis.)
[/quote]

ID:
#2
Contributed:
by Louis Lazaris
Date:
Tue, 19 Oct 2010 06:30:09 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Any particular reason why IE8 is listed as "buggy" in the compatibility chart? I don't see a note explaining any "bug" in IE8. Is that a mistake? (considering IE7 has "full" support, it seems odd...)

Related Products