CSS padding-bottom Property
Learn how the CSS padding-bottom property adds space between an element's content and its bottom border, with values, examples, and gotchas.
The padding-bottom property sets the amount of space between an element's content and its bottom border. It controls the inner spacing on the bottom side only and is one of the four individual padding properties alongside padding-top, padding-left, and padding-right.
Understanding padding-bottom is useful whenever you need precise vertical breathing room below text or other content — without affecting surrounding elements the way margin-bottom would.
Negative values are not allowed for padding-bottom. The minimum value is 0.
| Initial Value | 0 |
|---|---|
| Applies to | All elements except those with display set to table-row-group, table-header-group, table-footer-group, table-row, table-column-group, or table-column. Also applies to ::first-letter. |
| Inherited | No |
| Animatable | Yes |
| Version | CSS1 |
| DOM Syntax | element.style.paddingBottom = "5%"; |
Syntax
padding-bottom: <length> | <percentage> | initial | inherit;The property accepts a single value. Using the padding shorthand with four values is equivalent but sets all four sides at once.
Values
| Value | Description |
|---|---|
<length> | A fixed bottom padding expressed in any CSS length unit (px, em, rem, pt, cm, etc.). The initial value is 0. |
<percentage> | Bottom padding as a percentage of the width (not the height) of the containing block. This surprises many developers — see the note below. |
initial | Resets the property to its default value (0). |
inherit | Takes the computed value from the parent element. |
Percentage values are relative to the containing block's width, not its height. This is true for all four padding sides and is defined by the CSS specification. It means padding-bottom: 50% creates a height equal to half the container's width — a technique used to make aspect-ratio boxes before the aspect-ratio property existed.
How padding-bottom affects layout
padding-bottom increases the element's total height. The exact calculation depends on the box-sizing value in effect:
content-box(default):total height = height + padding-top + padding-bottom + border-top + border-bottom. Thepadding-bottomvalue is added on top of the specifiedheight.border-box: the specifiedheightincludes padding and border. Addingpadding-bottomshrinks the content area rather than growing the element.
Examples
Basic pixel value
The most common usage — a fixed number of pixels below the content:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with px</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>padding-bottom: 40px</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Length value in centimetres
Any CSS length unit works. Here 2cm is used, which is useful for print stylesheets:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with cm</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>padding-bottom: 2cm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Percentage value
padding-bottom: 25% adds bottom padding equal to 25% of the containing block's width. This example uses it to create a simple visual card with proportional spacing:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with %</title>
<style>
.card {
width: 300px;
border: 2px solid #1c87c9;
background: #e8f4fd;
padding-bottom: 25%; /* = 75px (25% of 300px) */
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="card">
<strong>Card title</strong>
<p>The bottom padding equals 25% of the card's width.</p>
</div>
</body>
</html>Using em for scalable spacing
em-based padding scales with the element's font size, which keeps proportions intact when the font size changes:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with em</title>
<style>
.note {
font-size: 18px;
border-left: 4px solid #1c87c9;
padding-left: 12px;
padding-bottom: 1em; /* = 18px, matches font-size */
background: #f0f8ff;
}
</style>
</head>
<body>
<div class="note">
This note box uses <code>padding-bottom: 1em</code>. If you increase
the font size, the bottom padding grows proportionally.
</div>
</body>
</html>box-sizing comparison
The same height and padding-bottom behave differently under content-box vs border-box:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom and box-sizing</title>
<style>
.box {
width: 220px;
height: 80px;
padding-bottom: 40px;
border: 2px solid #333;
background: #d0e8ff;
margin-bottom: 12px;
color: #111;
font-size: 14px;
}
.content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
.border-box { box-sizing: border-box; } /* total height stays 80px */
</style>
</head>
<body>
<div class="box content-box">content-box — total height: 124px</div>
<div class="box border-box">border-box — total height: 80px</div>
</body>
</html>Related properties
padding— shorthand that sets all four sides at once.padding-top— space above the content.padding-left— space to the left of the content.padding-right— space to the right of the content.margin-bottom— outer space below the element's border (outside, not inside).box-sizing— controls whether padding is included in the declaredwidth/height.height— the height of the content area, affected bypadding-bottomincontent-boxmode.