CSS Padding

February 20, 2021

Padding means the space between the content and its border or space around an element’s content, inside of any defined borders.

Padding - Individual Sides

CSS padding has different properties for each sides. So we can define padding for each side.

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

Tip: Negative values are allowed.

See the Pen padding by Arpit (@soniarpit) on CodePen.

Instead writing individual properties for each side, you can also write it in one line.

The padding property is a shorthand property for the following individual margin properties:

So, here is how it works:

If the margin property has four values:

padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px

If the padding property has three values:

padding: 25px 50px 75px;
- top padding is 25px
- right and left padding are 50px
- bottom padding is 75px

If the padding property has two values:

padding: 25px 50px;
- top and bottom padding are 25px
- right and left padding are 50px

If the padding property has one value: