It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Padding Property

Reading time 2 min
Published Sep 8, 2017
Updated Sep 26, 2019

What is padding in CSS?

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

Example
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:

Example
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:

Example
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:

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

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

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

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

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
4+
Browser image
Opera
3.5+
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All