What is Padding Used For in CSS?

What is Padding Used For in CSS?

The padding area of an element is the space between its content and its border. Padding adds extra space within an element. Margin, on the other hand, adds extra space around an element.

How to Work with Padding in CSS

CSS padding properties are used to provide space around an element’s content while staying within any established borders.

Remember:

margin adds space outside an element border
padding adds space inside an element border

Padding – Individual Sides

CSS allows you to specify padding for each side of an element:

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

Example:

div {
  padding-top: 50px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-left: 20px;
}

Padding – Shorthand Property

To simplify the code, all of the padding properties can be specified in a single property.

The padding property is a shorthand for the individual padding properties listed below:

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

So, here is how it works:
If the padding property has four values:
padding: 50px 25px 50px 25px;

top padding is 50px
right padding is 25px
bottom padding is 50px
left padding is 25px

4 values

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left.

div {
  padding: 50px 25px 50px 25px;
}

3 values

Using 3 values applies the first to top, the second to left & right, the third to bottom.

div {
  padding: 25px 50px 75px;
}

2 values

Using 2 values applies the first to bottom & top, and the second to left & right.

div {
  padding: 20px 10px;
}

1 value

Using a single value applies that to all the paddings: top, right, bottom, left.

div {
  padding: 25px;
}

Values accepted

The following values can be assigned to all padding properties:

length – defines padding in px, pt, cm, and so on.
% – specifies padding as a percentage of the width of the containing element.
inherit – indicates that the padding should be passed down from the parent element.