padding-top (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-top: { length | percentage | inherit } ;

Description

The property padding-top sets the padding on the top side of an element using the value specified.

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.

Example

This style rule assigns a 2em padding to the top side of paragraphs within the element with ID "example":

#example p {
  padding-top: 2em;
}

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.

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.

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.)

User-contributed notes

ID:
#6
Contributed:
by Tyssen
Date:
Thu, 03 Jan 2008 00:33:42 GMT

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

As mentioned previously in the margin section, I don't really understand what this means (maybe it's just me). I'm unsure which containing block and which element is being referred to and "resulting layout is undefined" doesn't really mean anything to me.

Related Products