CSS padding Property

CSS padding property specifies the padding for all four sides of an element in one declaration. An element’s padding is the space between the content of the element and its surrounding border.

The padding property is a shorthand of the below four properties:

The padding property can accept 1 to 4 values at a time. Multiple values must be comma-separated. Let’s discuss each one by one:

If only one value is specified

  • padding: val;

The same value(val) is used for all four sides(top, right, bottom and left) of padding. Refer to the example below:

Example:

div{
  padding: 30px;
}

If two values are specified:

  • padding: val1 val2;

The first value(val1) defines the padding of the top and bottom side and the second value(val2) defines the padding of the left and right side. Refer to the example below:

Example:

div{
  padding: 20px 40px;
}

If three values are specified

  • padding: val1 val2 val3;

The first value(val1) defines the padding of the top, the second value(val2) defines the padding of the left and right side, and the third value(val2) defines the padding of the bottom of the element. Refer to the example below:

Example:

div{
  padding: 20px 40px 60px;
}

If all four values are specified

  • padding: val1 val2 val3 val4;

The first value(val1) defines the padding of the top, the second value(val2) defines the padding of the right, the third value(val3) defines the padding of the bottom and the fourth value(val4) defines the padding of the left side of the element. Refer to the example below:

Example:

div{
  padding: 20px 40px 60px 80px;
}

CSS Syntax

The padding property has the below syntax:

padding: padding-top padding-right padding-bottom padding-left|initial|inherit;

Property Values

The padding property accepts the following values:

padding-topSpecifies the padding of the top side of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%). The percentage value is calculated from the width of the containing element.
padding-rightSpecifies the padding of the right side of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%). The percentage value is calculated from the width of the containing element.
padding-bottomSpecifies the padding of the bottom side of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%). The percentage value is calculated from the width of the containing element.
padding-leftSpecifies the padding of the left side of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%). The percentage value is calculated from the width of the containing element.
initialSets the padding property to its default value(0).
inheritInherits the padding property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.padding= “20px 40px”;