Padding is the space between the content and the border of an element.
The padding property sets the space inside an element.
It specifies padding for all 4 sides of the element: top, right, bottom, and left.
An <input> element with extra padding.
<input type="text" placeholder="Your email"
style="padding: 15px;">
The padding property sets the space between the element's content and its border.
The value can be set with any length value, such as, px, pt, cm, or percentage.
This property sets the spacing for all 4 sides of the element.
An element with padding on all 4 sides.
<div style="padding:30px;
border: 4px solid lightblue;
background:aliceblue;">
Element with 30px padding on all sides
</div>
For details on padding, see our CSS padding reference guide.
The following examples show padding
accepting 4, 3, 2, and 1 values.
And element with 4 padding
values, one for each side.
<style>
.example1 {
padding: 20px 40px 60px 80px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
<div class="example1">
Padding: top 20px, right 40px,
bottom 60px, and left 80px
</div>
An element with 3 padding
values for top, right, bottom, and left the same as right.
<style>
.example1 {
padding: 20px 40px 60px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
<div class="example2">
Padding: top 20px, right 40px,
bottom 60px, and left 40px
</div>
An element with 2 padding
values for top and bottom, and right and left.
<style>
.example2 {
padding: 20px 40px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
<div class="example2">
Padding: top 20px, right 40px,
bottom 20px, and left 40px
</div>
An element with 1 padding
value for all sides.
<style>
.example4 {
padding: 40px;
border: 5px solid lightblue;
background-color: aliceblue;
}
</style>
<div class="example4">
Padding: top 40px, right 40px,
bottom 40px, and left 40px
</div>
The CSS width property specifies the element's content area width.
When a padding
value is used on an element, it is added to the element's width.
The element below has a total width of 340px (300px + 2 x 20px).
<style>
.element1 {
width: 300px;
padding: 20px;
border: 4px solid steelblue;
}
</style>
<div class="element1">
This element is 340px wide
</div>
To maintain the element's width regardless of the padding
values, use the box-sizing property.
This element is 300px wide, unaffected by the padding
values.
<style>
.element2 {
width: 300px;
padding: 20px;
border: 4px solid steelblue;
box-sizing: border-box;
}
</style>
<div class="element2">
This element is 300px wide
</div>
Padding values can also be set for each side with these properties:
They accept any valid length value, such as, px, em, cm, and %.
An element with 4 padding properties, one for each side.
<style>
.individual {
padding-top: 60px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 50px;
border: 4px solid steelblue;
background-color: aliceblue;
}
</style>
<div class="individual">
Padding:
top 60px, right 10px,
bottom 30px, and left 50px
</div>
Property | Description |
---|---|
padding | A shorthand for setting all padding properties |
padding-bottom | Sets the bottom padding of an element |
padding-left | Sets the left padding of an element |
padding-right | Sets the right padding of an element |
padding-top | Sets the top padding of an element |