Description

The padding-right property sets the padding to the right 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 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.

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.

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.

Firefox versions up to and including 2.0.0.7 incorrectly apply padding-right on inline elements when the element wraps to a new line. The preceding line and the current line both appear to have padding applied (see Bugzilla).

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