In this section, we will learn what the padding property is and how to use it in CSS.

Click here to run the example of padding property.

CSS padding Property Definition and Usage

Padding is the empty space between the border of an element and its content.

In CSS, there’s a property named `padding` by which we can adjust (increase or decrease) this empty space between the content and border of an element.

Basically, the padding property is a shorthand one for the following properties:

• padding-top: this property is used to set the top padding of an element.
• padding-right: this property is used to set the right padding of an element.
• padding-bottom: this property is used to set the bottom padding of an element.
• padding-left: this property is used to set the left padding of an element.

So by using the `padding` property, we can set the values for the mentioned properties in one declaration.

Note: there are more on the CSS padding which you can learn about it in the CSS padding section.

CSS padding Property Syntax

padding: length|auto|initial|inherit;

padding: value1 value2 value3 value4

When we set 4 values for the padding property, the first value specifies the top padding. The second value specifies the right padding, the third value specifies the bottom padding, and the last value specifies the left padding.

padding: value1 value2 value3

When we set 3 values for the padding property: the first value specifies the top padding, the second value specifies the right and left padding, and the third value specifies the bottom padding of the target element.

padding: value1 value2

When we set 2 values for the margin property, the first value specifies the top and bottom padding and the second value specifies the left and right padding of the target element.

padding: value

When we set only one value for this property, the entire padding of an element will be set to the same value.

CSS padding Property Value

The value of this property is a number with relative and absolute units supported in CSS.

Note: you can also use the two global values “initial” and “inherit” for this property.

Example: padding in CSS

See the Pen padding in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.