padding-top
Sets the inner spacing at the top of an element. Use the prefix pt followed by a value with unit. Useful for section top margins, card inner spacing, and header height adjustment.
Class Patterns
Prefix pt + value + unit. Use px for values under 20px, rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
pt4px | padding-top: 4px | minimum spacing |
pt8px | padding-top: 8px | narrow spacing |
pt12px | padding-top: 12px | default spacing |
pt16px | padding-top: 16px | generous spacing |
pt2rem | padding-top: 2rem (20px) | rem unit starting point |
pt2-4rem | padding-top: 2.4rem (24px) | decimals expressed with hyphens |
pt3-2rem | padding-top: 3.2rem (32px) | wide spacing |
pt4rem | padding-top: 4rem (40px) | section top spacing |
pta | padding-top: 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 | pt8px | pt0-8rem |
| 12px | pt12px | pt1-2rem |
| 16px | pt16px | pt1-6rem |
| 20px | pt20px | pt2rem |
| 24px | pt24px | pt2-4rem |
| 32px | pt32px | pt3-2rem |
| 40px | pt40px | pt4rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
pt4px | 4px | Badge/tag fine inner margin |
pt8px | 8px | Button/input field top margin |
pt16px | 16px | Card inner top gap |
pt2rem | 20px | Section top padding |
pt4rem | 40px | Hero section top margin |
Code Examples
<!-- Different gap only at the top of card -->
<div class="pt2rem pr16px pb16px pl16px bg18181B br8px">
Top only 20px, rest 16px
</div>
<!-- Push content below fixed header -->
<header class="pf t0 l0 w100p h6rem bg18181B zi100">Header</header>
<main class="pt6rem px2rem">
Compensate with padding-top equal to header height
</main>
<!-- Section top margin -->
<section class="pt4rem pb4rem px2rem">
<h2 class="mb16px">Section Title</h2>
<p>Section content</p>
</section>
<!-- Apply top/bottom simultaneously with py (pt + pb) -->
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">
Button
</button>Tips & Notes
Apply top and bottom simultaneously with py
If top and bottom padding are the same, use py16px to apply pt16px pb16px at once. This is an Atomic CSS exclusive shorthand.
box-sizing caution
By default, pt increases the total height of the element. Use bxzbb (box-sizing: border-box) to include padding within the height.