CSS padding Property

CSS padding property is a shorthand property for setting all four sides padding in one statement i.e. padding-top, padding-right, padding-bottom, and padding-left.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: 0
Applies to: All elements except <tbody>, <thead>, <tfoot>, <tr>, <colgroup> and <col> elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.padding = "10px 0px 15px 5px"

Syntax

Here is a syntax for the CSS padding property

padding: length | percentage | auto | initial | inherit;

CSS padding property may be specified using one, two, three, or four values.

  • padding: 12px;
    All four sides apply padding 12 pixels.
  • padding:10px 20px;
    Top and bottom side padding 10 pixels.
    Right and left side padding 20 pixels.
  • padding: 10px 20px 30px;
    Top side padding 10 pixels.
    Left and right side padding 20 pixels.
    Bottom side padding 30 pixels.
  • padding: 10px 20px 30px 40px;
    Top side padding 10 pixels.
    Right side padding 20 pixels.
    Bottom side padding 30 pixels.
    Left side padding 40 pixels.

Property Values

The following table describes the values of this property.

Value Description
padding-top Specifies the top padding of the element
padding-right Specifies the right padding of the element
padding-bottom Specifies the bottom padding of the element
padding-left Specifies the left padding of the element
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets padding values of the element.

.padding-1 {
  padding: 30px;
}
.padding-2 {
  padding: 10px 50px;
}
.padding-3 {
  padding: 45px 15px 30px;
}
.padding-4 {
  padding: 15px 25px 35px 45px;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.