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

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

1+

Edge

12+

Firefox

1+

IE

4+

Opera

3.5+

Safari

1+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

All

Safari

All