The properties padding-top, padding-right, padding-bottom, padding-left and padding are called padding properties and they specify the width of the padding area of a box.

The value padding-width may be expressed as a fixed width, a percentage or auto. These properties cannot be set to negative.

The padding-top, padding-right, padding-bottom and padding-left properties contain following information:

  1. value: normal, <padding-width> or inherit;
  2. initial: 0;
  3. applies to: all elements except table-row-group, table-header-group, table-footer group, table-row, table-column-group and table-column;
  4. inherited: no;
  5. percentages: refers to width of containing block;
  6. media: visual;
  7. computed value: percentage specified or absolute length.

The padding property contains following information:

  1. value: normal, <padding-width>{1,4} or inherit;
  2. initial: 0;
  3. applies to: all elements except table-row-group, table-header-group, table-footer group, table-row, table-column-group and table-column;
  4. inherited: no;
  5. percentages: refers to width of containing block;
  6. media: visual;
  7. computed value: percentage specified or absolute length.

The padding property is a shorthand for all other properties.

This property may have a minimum of one value and maximum of four. If there is only one value, it applied to all four sides of the padding area. If there are two values, the top and the bottom sides will be set to the first number, while the right and the left side will be set to the second. In case of assigning three values, the top is set to the first value, the left and right are set to the second and the bottom is set to the third. Naturally in case of assigning all four values they will be applied to all four sides respectively.

The background color or image of the padding area is specified by the background property of its content box.

Example

Example of CSS padding properties:

 

›› go to examples ››