Padding is the space between the content and the border of an element.
The padding property add spacing inside the element.
This property accepts any length value, such as, px, %, em, and others.
An element with a 40-pixel padding on all 4 sides.
<style>
.padding {
background-color: aliceblue;
border: 1px solid lightblue;
padding: 40px;
}
</style>
<div class="padding">
40px padding on all sides
</div>
The padding property specifies the spacing for 4 sides of an element.
Padding is spacing added inside the element, between the content and border.
This property is a shorthand for these four side-specific padding properties:
Here is an example: padding: 20px 10px 12px 25px;
These represent the top, right, bottom, and left values -- in that order.
padding: length | initial | inherit;
| Value | Description |
|---|---|
| length | Default is 0. The padding for all 4 sides. Negative values not allowed. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Quick Example: padding: 35px;
padding: top right bottom left;
| Value | Description |
|---|---|
top |
Default is 0. Top padding value specified as a length or % CSS value. |
right |
Default is 0. Right padding value specified as a length or % CSS value. |
bottom |
Default is 0. Bottom padding value specified as a length or % CSS value. |
left |
Default is 0. Left padding value specified as a length or % CSS value. |
Quick Example: padding: 35px 0 20px 5px;
Click the buttons to see the different padding values.
<style>
.padding-examples {
padding: 5%;
border: 2px solid steelblue;
}
</style>
<div class="padding-examples">
An element with 5% padding
</div>
Click the buttons to see the different padding values.
<style>
.padding-example {
padding: 80px 40px 60px 20px;
max-width: 450px;
border: 2px solid steelblue;
}
</style>
<div class="padding-example">
An element with 80px, 40px, 60px, 20px padding
</div>
The padding values are in this order: top, right, bottom, and left.
When three values are specified it sets top, right, and bottom. Left is the same as right.
With two values, the first value sets top and bottom, and the second sets left and right.
With one value, all sides of the element use the specified padding.
Both properties add spacing to the elements.
The padding property adds space to the inside of the element.
The margin property adds space to the outside of the element.
This difference greatly affects click regions, background colors, and other behaviors.
This table shows when padding support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
