CSS Padding

CSS padding properties allow us to set a space between the content and the border of an element.

Using these padding properties, we can control the padding of each individual side of an element such as top, bottom, left, and right.

In this CSS tutorial, we will discuss all these padding properties in detail.

This paragraph has a padding of 30px each side.

CSS has the inbuilt property padding that is used to define the padding for each individual side of an element.

In the example below, the <h1> element has a padding of 50px on each side. This means that there will be a gap of 50px between the content and the border of the element. Try out the example below to see how it works:

Example:

h1{
  padding: 50px;
  border: 2px solid blue;
}

The padding property can accept any of the following values:

• length – Specifies padding in px, em, rem, pt, cm etc.
• % – padding will be the given % of its parent element’s padding.
• inherit – padding is inherited from its parent element.

CSS Padding for Individual Side

We can also specify the padding for each individual side of the element such as top, bottom, left, and right using the below padding properties:

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

Try out the example below to see how it works:

Example:

div{
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 60px;
  padding-left: 80px;
}

CSS Padding Shorthand Property

In the above example, we specified padding for each side individually. Instead of specifying padding for each side individually, we can combine all these individual padding properties in one line using the shorthand padding property.

The padding property is a shorthand of the following padding properties:

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

The padding property can take one, two, three, or four values at once. It works differently with a different number of values. In the below examples, we have explained how it works:

If the padding property has four values:

• padding: 20px 40px 60px 80px
  • padding-top will be 20px
  • padding-right will be 40px
  • padding-bottom will be 60px
  • padding-left will be 80px

Example:

div{
  padding: 20px 40px 60px 80px;
}

If the padding property has three values:

• padding: 20px 40px 60px
  • padding-top will be 20px
  • padding-left and pading-right will be 40px
  • padding-bottom will be 60px

Example:

div{
  padding: 20px 40px 60px;
}

If the padding property has two values:

• padding: 20px 40px
  • padding-top and padding-bottom will be 20px
  • pading-left and padding-right will be 40px

Example:

div{
  padding: 20px 40px;
}

If the padding property has only one value:

• padding: 40px
  • Each side of the element will have the same padding of 40px.

Example:

div{
   padding: 40px;
}

Inherit Padding from the Parent Element

The child element can inherit any of the padding properties and their values from its parent element. See the example below:

Example:

.parent{
   padding: 40px;
}
.child{
   padding: inherit;
}

All Padding Properties