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 |
pba | padding-bottom: auto | auto padding (some layout contexts) |
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 |
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>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.