Little Web Hut

CSS 2.1 Reference: padding Property

CSS padding Property
Syntax
selector {padding: width width width width;}
  • A minimum of 1 and a maximum of 4 width values may be specified.
  • width is specified by using a length or percentage.
(OR)
selector {padding: value;}
  • value is specified by using the keyword inherit.
Usage

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;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The padding property is set using 2 values.
  .tst1 {padding: 0.5em 65px; background-color: orange;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The padding property is set using 3 values.
  .tst1 {padding: 2em 65px 0.5em; background-color: orange;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The padding property is set using 4 values.
  .tst1 {padding: 30px 65px 10px 50%; background-color: orange;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • 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.
Applies To All elements except elements with the following display types: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.
Inherited No
Initial Value 0 for each of the four individual padding sides.


padding Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe padding property is set using a single value.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe padding property is set using 2 values.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe padding property is set using 3 values.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe padding property is set using 4 values.