CSS padding property

Definition and Usage

The padding shorthand property sets all padding properties in one declaration.

Description

This shorthand property sets the width of all padding of the element, or sets the width of padding on each side. The padding set on inline non-replaced elements does not affect line height calculation; therefore, if an element has both padding and background, it may visually extend to other lines and may even overlap with other content. The element's background extends through the padding. Negative margin values are not allowed.

Note:Negative values are not allowed.

Example 1

padding:10px 5px 15px 20px;
  • Top padding is 10px
  • Right padding is 5px
  • Bottom padding is 15px
  • Left padding is 20px

Example 2

padding:10px 5px 15px;
  • Top padding is 10px
  • Right padding and left padding are 5px
  • Bottom padding is 15px

Example 3

padding:10px 5px;
  • Top padding and bottom padding are 10px
  • Right padding and left padding are 5px

Example 4

padding:10px;
  • All 4 paddings are 10px

See Also:

CSS Tutorial:CSS inner padding

HTML DOM Reference Manual:padding property

Example

Set the 4 padding values of the p element:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Try It Yourself

CSS Syntax

padding: length|initial|inherit;

Property Value

Value Description
auto The browser calculates the padding.
length Specifies the padding value in a specific unit, such as pixels, centimeters, etc. The default value is 0px.
% Specifies padding based on a percentage of the parent element's width.
inherit Specifies that padding should be inherited from the parent element.

Technical Details

Default Value: 0
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.padding="10px 5px"

Try It Yourself Example

All padding properties in one declaration
This example demonstrates how to set all padding properties in one declaration using the shorthand property, which can have one to four values.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5