Padding is the space between the content and border of an element. The padding property is a shorthand property that sets the values of the four padding properties - padding-top, padding-right, padding-bottom and padding-left in a single declaration.
CSS
padding: [padding-top] [padding-right] [padding-bottom] [padding-left];
The background color that you give to an element will be applied to the entire area (including padding) enclosed within the border.
Values
<length> : Specifies padding width in px, pt, em, rem, cm, etc. Default value is 0. Negative values are not allowed.
<percentage> : Specifies padding width as a percentage of the width of the containing block. Negative values are not allowed
initial : Sets the default value.
inherit : Inherits the value from parent element.
You can give four or less than four values to the padding property. The effect of each of these on padding is given below.
Giving four values
The first, second, third and forth values define the top, right, bottom and left padding respectively.
CSS
padding: 10px 20px 30px 40px;
For the above declaration
- top padding is 10px
- right padding is 20px
- bottom padding is 30px
- left padding is 40px
Giving three values
The first and third values define the top and bottom padding respectively. The second value defines the right and left padding.
CSS
padding: 10px 20px 40px;
For the above declaration
- top padding is 10px
- right and left padding are 20px
- bottom padding is 40px
Giving two values
The first value defines the top and bottom padding. The second value defines the right and left padding.
CSS
padding: 10px 20px;
For the above declaration
- top and bottom padding are 10px
- right and left padding are 20px
Giving one value
It defines all the four padding widths.
CSS
padding: 20px;
For the above declaration
- padding on all the four sides is 20px
In the following example, padding for all the four sides is defined in a single declaration.
See the Pen padding example by Aakhya Singh (@aakhya) on CodePen.
It's not necessary to give all the padding values in the same unit. For example, you can give one of the values in px and others in percentage as shown below.
See the Pen padding example by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all the major browsers. Versions of IE for Windows upto 7 don't support the value inherit.
