Padding in CSS

What is Padding in CSS?

The Padding in CSS property controls the amount of space inside the HTML element between its content and border. You know about the margin that adds up the space outside an element's border, but for padding, the space is added inside the element's border. You can change the top, right, bottom, and left padding properties independently, and you can also change all the padding properties at once using the shorthand property that you'll study later in this article.

The green part in the image below represents the padding area inside the element's container, while the brown area, which is the margin area, is outside the element's container. The border separates the margin area and the padding area.

Let's take a closer look at how padding in CSS can be obtained.

Syntax

The padding properties can be specified using the following values:

• length - specifies padding in rem, em, px, etc.
• % - specifies padding in the percentage of the containing element's width.
• inherit - specifies the padding should be inherited from the parent element.

For example, take two elements, padding is added to one p element, and the second p element doesn't have any padding.

Here, the p tag with the class with-padding is assigned padding of 10px from all the sides. This is the shorthand property that you'll study later in this article.

The output of the above code snippet is shown below, and observe that the element with the padding property has more space inside the container than the element with no padding.

CSS Padding Properties

Sometimes there is a need to specify different CSS padding properties for different sides. As shown below, you can achieve this by setting the padding property to the individual side.

Let's take an example to understand the above-defined properties.

Output of the above code snippet is shown below:

As you can see, in the output image above, the padding(green part) in all four directions is different because it was set this way in the code snippet above.

CSS Padding Shorthand Property

• The padding declaration is a shorthand property to declare padding to all four directions if padding in all four directions is the same so that you don't have to write padding-right, padding-left, padding-top, padding-bottom individually.

• If the padding property has two values, then the first value is applied to padding-top, padding-bottom of the element, and the second value is applied to padding-left, padding-right.

• If three values are provided to the padding property, then the first value is applied to padding-top, the second value is applied to padding-right and padding-left, and the third value is applied to padding-bottom.

• If four values are provided to the padding property, the first value is applied to padding-top, the second to padding-right, the third to padding-bottom, and the fourth value is applied to padding-left.

Let's take an example that will demonstrate the use of shorthand property.

Output of the above code snippet is shown below. Here the green color part is the padding area.

How to inherit the Padding in CSS from the Parent Element?

To inherit the padding of an element from its parent element, you can use padding: inherit. This will allow you to use the same padding as applied to the parent element, i.e., and it will inherit the padding from the parent element. Let's take an example to understand this better.

Output of the above code snippet is shown below, which states that the div container has the padding of 15px, and the same padding is inherited by the p tag because of padding: inherit. The images below the green part show the padding area.