CSS padding-bottom Property
This CSS property is used to specify the padding space on the bottom of an element. See more about property values in use.
The padding-bottom property sets the padding space on the bottom of an element. It defines the space between the element’s content and its bottom border.
The element’s padding contributes to computing the height of an element. Specifically, padding-bottom increases the total height by adding space below the content. If you use the “border-box” value of the box-sizing property, the total height calculation changes so that the padding is included within the specified height.
Negative values are invalid.
This property doesn't have any effect on inline elements, like <span>.
| Initial Value | 0 |
|---|---|
| Applies to | All elements. An exception is made when the display property is set to table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Padding space is animatable. |
| Version | CSS1 |
| DOM Syntax | element.style.paddingBottom = "5%"; |
Syntax
Syntax of CSS padding-bottom Property
padding-bottom: length | % | initial | inherit;Example of the padding-bottom property:
Example of CSS padding-bottom Property with px value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Result
Example of the padding-bottom property with the "length" value:
Example of CSS padding-bottom Property with cm value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| length | It sets the bottom padding in px, pt, cm, etc. Its initial value is 0. | Play it » |
| % | It sets bottom padding in percent of the width of the containing block. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What is the purpose of the 'padding-bottom' property in CSS?