CSS Padding

CSS padding sets the padding around all four sides of an HTML element. CSS padding can be applied to nearly every HTML element. In addition, we can set each side of the element with a different padding value. The padding clears an area around the content of an element.

The padding is affected by the background color of the element. You can set the padding of an element using the shorthand padding property, or you can set the padding for each side individually.

Padding Property (Shorthand)

When using the shorthand padding property, set the values as follows: top, right, bottom, and left. For example:

p {
    padding: 1px 2px 3px 6px;
}

If you want to apply the same padding to all four sides, you just use one value:

p {
    padding: 10px;
}

If you want the padding to be the same for the top/bottom and left/right, you use two values:

p {
    padding: 10px 20px;
}

Using three values, you will set the left and right padding the same, while setting the top and bottom with different values:

p {
    padding: 10px 5px 20px;
}

If the padding is set to zero, then it has the same edge as the element. You should note that padding can be set using a non-negative value.

You can specify the measurement as px, pt, em, in, cm, etc. You can also specify a percentage for your padding, which will be a percentage of the width of the element’s containing block.

Padding Individual Sides

As mentioned earlier, in CSS, it is possible to specify different padding values for each side of the HTML element:

p {
    padding-top:5px;
    padding-right:10px;
    padding-bottom:5px;
    padding-left:10px;
}