This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

padding

Summary

The padding optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased.

The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).

Overview table

Initial value
browser-dependent
Applies to
all elements (except table-*-group, table-row and table-column, br)
Inherited
No
Media
visual
Computed value
the percentage or the absolute length
Animatable
Yes

CSS Object Model Property
:

Percentages
relative to the ‘width’ of the containing block

Syntax

  • padding: length
  • padding: percentage

Values

length
Specifies a non-negative fixed width defined in pixels, pt, em, etc. . See length for details.
percentage
Calculated using the dimensions of the containing block or element.

Examples

Padding set at 10% for all 4 sides.

padding: 10% 10% 10% 10%;
      /*  top, right, bottom, and left padding set at 10%   */

View live example

The padding style has three values. The left padding value is the inferred by the right padding value.

padding: 10px 3% 20px;
      /*  top 10px padding          */
      /*  left and right 3% padding */
      /*  bottom 20px padding       */

The padding style has two values. The left padding value is the inferred by the right padding value. The bottom value is inferred by the top value.

padding: 10px 20%;
      /*  top and bottom 10px padding  */
       /*  left and right 20% padding  */

The padding style has one value. All the values are inferred to be equal to the top padding value of 10 px.

padding: 10px;
       /* on all sides 10px padding */

The padding style has one value. All the values are inferred to be equal to the top padding value of 20%.

padding: 20%;
       /* on all sides 20% padding */

Notes

This is a composite property that specifies up to four padding values, in the following order: top, right, bottom, left. If one width value is specified, it is used for all four sides. If two width values are specified, the first is used for the top and bottom borders, and the second is used for left and right borders. If three width values are specified, they are used for top, right/left, and bottom borders, respectively. Negative values are not allowed.

As of Microsoft Internet Explorer 5.5, this property applies to inline elements. With earlier versions of Windows Internet Explorer, inline elements must have an absolute position or layout to use this property.

Element layout is set by providing a value for the height property or the width property.

Related specifications

CSS basic box model
W3C Working Draft
CSS 2.1, 8 Box model
W3C Recommendation

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg.

  • Microsoft Developer Network.