CSS padding Property

The padding property creates padding space on all sides of an element’s content.

Padding values are set using lengths or percentages.

Negative values are not valid.

CSS padding property is a shorthand for the following properties:

We can use padding property for all sides (top, bottom, left, right).

The padding property may be specified using one, two, three, or four values:

  • When four values are specified the first value sets the top side, the second sets the right side, the third value sets the bottom side and the fourth value sets the left side.
  • When three values are specified, the first one sets the top side, the second one sets the right and left sides and the third value sets the bottom side.
  • When two values are specified, the first value sets the top and bottom sides and the second one sets the right and left sides.
  • If the padding has only one value it is applied to all four values
Initial Value 0
Applies to All elements, except when the display property is set to table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Padding space is animatable.
Version CSS1
DOM Syntax object.style.padding = "30px";

Syntax

padding: length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Padding property example</h2>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

In the given example this code means that the padding in the top side must be 20px, in the right side 40px, in the bottom side 20px and in the left side 40px.

Another example where the padding is set in percentages:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h2>Padding property example</h2>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

An example where two values are specified. The first value sets the top and bottom sides and the second value sets the right and left sides:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Padding property example</h2>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Values

Value Description
length Defines a padding in px, pt, cm, etc. The default value is 0.
% Sets the padding in % of containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles