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 .
Microsoft Developer Network.