The CSS Padding Property

What is padding in CSS?

By using CSS padding property, you can add space around an element within its borders:

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

This property is actually a shorthand for four CSS padding subproperties:

• padding-top
• padding-right
• padding-bottom
• padding-left

Syntax for CSS padding

The padding CSS property accepts from one to four values:

padding: value1 value2 value3 value4;

The values for the padding CSS property can be written in px, pt, %, cm, etc. The default value is 0. The value can also be initial which sets the property to its default value, or inherited which sets the value to be the same as its parents.

If you only specify one value, it is used to modify the CSS padding on all four sides:

p {
   padding: 5px;   
}

If you define two values, the first one will affect padding for the top and bottom sides, and the second value will affect padding for the right and left sides:

p {
   padding: 5px 8px;   
}

If you specify three values, the first value defines top padding, the second value defines right and left padding, and the third value sets the padding to the bottom:

p {
   padding: 5px 8px 10px;   
}

If you define all four values, all four sides are set in a clockwise manner: top, right, bottom, left:

p {
   padding: 5px 8px 10px 7px;   
}

Note: you cannot set negative values for the padding CSS property.

Browser support

Mobile browser support