CSS 2.1 Reference: padding Property

The padding property is used as a shorthand method to specify all 4 padding widths in one place. See the Box Model for a description of the boxes that are generated for elements and the relative position of the padding area.

Padding values cannot be negative. If a percentage value is used, the value will be a percentage of the containing block's width.

• The Individual padding sides are specified as follows:
  • If 1 width is specified - All 4 padding areas are set to this width.
  • If 2 widths are specified - 1st width = top and bottom padding areas, 2nd width = left and right padding areas.
  • If 3 widths are specified - 1st width = top padding area, 2nd width = left and right padding areas, 3rd width = bottom padding area.
  • If 4 widths are specified - 1st width = top padding area, 2nd width = right padding area, 3rd width = bottom padding area, and 4th width = left padding area.

CSS Example: The padding property is set using a single value.

  .tst1 {padding: 40px; background-color: orange;}

CSS Example: The padding property is set using 2 values.

  .tst1 {padding: 0.5em 65px; background-color: orange;}

CSS Example: The padding property is set using 3 values.

  .tst1 {padding: 2em 65px 0.5em; background-color: orange;}

CSS Example: The padding property is set using 4 values.

  .tst1 {padding: 30px 65px 10px 50%; background-color: orange;}

• inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.