padding-bottom
Sets the inner spacing at the bottom of an element. Use the prefix pb followed by a value with unit. Useful for section bottom margins, card inner spacing, and container trailing space.
Class Patterns
Prefix pb + value + unit. Use px for values under 20px, rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
pb4px | padding-bottom: 4px | minimum spacing |
pb8px | padding-bottom: 8px | narrow spacing |
pb12px | padding-bottom: 12px | default spacing |
pb16px | padding-bottom: 16px | generous spacing |
pb2rem | padding-bottom: 2rem (20px) | rem unit starting point |
pb2-4rem | padding-bottom: 2.4rem (24px) | decimals expressed with hyphens |
pb3-2rem | padding-bottom: 3.2rem (32px) | wide spacing |
pb4rem | padding-bottom: 4rem (40px) | section bottom spacing |
Unit Comparison
Comparison of the same size expressed in px and rem. Based on: html { font-size: 10px }
| Size | px Class | rem Class |
|---|---|---|
| 8px | pb8px | pb0-8rem |
| 12px | pb12px | pb1-2rem |
| 16px | pb16px | pb1-6rem |
| 20px | pb20px | pb2rem |
| 24px | pb24px | pb2-4rem |
| 32px | pb32px | pb3-2rem |
| 40px | pb40px | pb4rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
pb4px | 4px | Badge/tag fine bottom margin |
pb8px | 8px | Button inner bottom gap |
pb16px | 16px | Card inner bottom gap |
pb2rem | 20px | Section bottom padding |
pb4rem | 40px | Scroll area bottom margin |
Padding You Can See
Only padding-bottom is applied to the outer box, with the blue box left untouched. The faint band below it is exactly the padding.
pb16px
16px. A good gap between the last line of a body and a divider.
pb2rem
20px. The default spacing for sections and cards.
pb4rem
40px. Space at the end of a page or before a footer.
Padding is the space inside the border
Padding sits inside the painted background area, so the box background covers it, and unlike margin it does not push neighbouring elements away.
Per-class Detail
pb16pxpadding-bottom: 16px
The default gap that keeps the last line of a card body from touching a divider or a footer.
When to use
Use it where information density matters: dense tables, list rows, card bodies.
<!-- Card body: keep the last line off the footer rule -->
<article class="bg18181B b1pxsolid27272A br8px">
<div class="pt16px px16px pb16px fs14px cA1A1AA lh1-7">
The last line stops 16px above the divider.
</div>
<footer class="p16px bt1pxsolid27272A fs12px c71717A">Updated today</footer>
</article>pb2rempadding-bottom: 2rem
20px. The default bottom spacing for sections and cards. Matching the top value keeps the rhythm even.
When to use
A good default for ordinary cards and panels. When it matches the top value you can collapse both into <code class="fs13px cC4B5FD bg1E1E2E py2px px4px br4px">py</code>.
<!-- Section rhythm: equal breathing room top and bottom -->
<section class="pt2rem pb2rem px2rem bb1pxsolid27272A">
<h2 class="fs2-4rem fw700 cFAFAFA mb16px">Members</h2>
<p class="fs14px cA1A1AA lh1-7">Section content</p>
</section>pb4rempadding-bottom: 4rem
40px. Enough space to signal visually that the page has ended.
When to use
Use it where a closing gesture is needed: between the body and the footer, or after the final block of a long article.
<!-- Page tail: space before the footer -->
<main class="pb4rem px2rem">
<p class="fs14px cA1A1AA lh1-7">Last paragraph of the article</p>
</main>
<footer class="p2rem bt1pxsolid27272A fs12px c71717A">Footer</footer>Code Examples
<!-- Top/bottom section padding -->
<section class="pt4rem pb4rem px2rem">
<h2 class="mb16px">Section Title</h2>
<p>Top 40px, bottom 40px inner gap</p>
</section>
<!-- Scroll area bottom margin -->
<div class="h40rem oya pb4rem">
<p>Scrollable content...</p>
<p>Apply pb4rem so the last item is not clipped</p>
</div>
<!-- Asymmetric card padding -->
<div class="pt2rem pr16px pb2-4rem pl16px bg18181B br8px">
Slightly wider gap at the bottom (visual balance)
</div>
<!-- Apply top/bottom simultaneously with py -->
<section class="py4rem px2rem">
py4rem = pt4rem + pb4rem
</section>A scrolling list with a pinned action bar. The list reserves the height of the bar at its bottom so the last row is never hidden behind the buttons.
<!-- Scroll list that clears a sticky action bar -->
<div class="pr h60rem df fdc bg0F0F17 b1pxsolid27272A br12px oh">
<!-- 8rem of bottom padding so the final row is never hidden -->
<div class="oya obyc fg1 minh0 pb8rem px2rem pt2rem">
<div class="py16px bb1pxsolid27272A fs14px cFAFAFA">Row 1</div>
<div class="py16px bb1pxsolid27272A fs14px cFAFAFA">Row 2</div>
<div class="py16px fs14px cFAFAFA">Last row stays visible</div>
</div>
<div class="pa b0 l0 w100p h8rem bt1pxsolid27272A bg0F0F17 df aic jcfe gap8px px2rem">
<button class="py8px px16px bg18181B cFAFAFA br8px bn cp">Cancel</button>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Apply</button>
</div>
</div>Tips & Notes
Apply top and bottom simultaneously with py
If top and bottom padding are the same, use py2rem to apply pt2rem pb2rem at once.
Bottom margin for scroll areas
Apply pb2rem or pb4rem to scrollable areas to prevent the last content from being clipped.
Padding never collapses
Vertical margins between adjacent elements collapse into one, but padding never collapses. Bottom padding on the parent also stops a last child's bottom margin from escaping the parent.
Percentage padding resolves against width
A percentage padding is resolved against the width of the containing block, even on the vertical sides. If you meant a vertical ratio, the result will be nothing like what you expect.
The last item in a scroll area
Some browsers ignore the bottom margin of the last child inside a scroll container. When you really need room below the last item, bottom padding on the container is the reliable choice.