CSS Padding

Last Updated Jul 21, 2015, 12:00:06 PM




CSS Padding

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).

Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.

The top, right, bottom, and left padding can be changed independently using separate properties.

The shorthand padding property can also be used, to change all paddings at once.

The example above is using the padding shorthand property, which accepts upto four values, shown here:

If fewer than four values are set, the missing values are assumed based on the ones that are defined

if only one value is defined, this sets all four padding properties to the same value:


Output



Try It Now

If three values are declared, it is padding: [top] [left-and-right] [bottom];.

Example


Try It Now

Any of the individual padding properties can be declared using longhand, in which case you would define only one value per property. So the previous example could be rewritten as follows:



Try It Now

Padding Usage

padding: 50px;

all four paddings are 50px

padding: 50px 100px;
  • top and bottom paddings are 50px
  • right and left paddings are 100px
padding: 15px 30px 75px;
  • top padding is 15px
  • right and left paddings are 30px
  • bottom padding is 75px
padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px


Browser compatibility
Feature
Basic support 1.0 1.0 1.0 3.5 4.0 ? ?


All CSS Padding Properties

Property Description Example
padding A shorthand property for setting all the padding properties in one declaration Try It Now
padding-bottom Used to set the padding for the bottom of an element Try It Now
padding-top Used to set the padding for the top of an element Try It Now
padding-left Used to set the padding for left side of an element Try It Now
padding-right Used to set the padding for right side of an element Try It Now




Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM







​