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 |
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 |
Padding You Can See
Only padding-top is applied to the outer box, with the blue box left untouched. The faint band that appears above it is exactly the padding.
pt16px
16px. A good gap between a card body and a divider.
pt2rem
20px. The default spacing for sections and cards.
pt4rem
40px. Top space for heroes and large sections.
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
pt16pxpadding-top: 16px
The default top gap for card bodies and list items. It gives text just enough room not to touch a divider or a header.
When to use
Use it where information density matters: dense tables, list rows, card bodies.
<!-- Card body: keep the text off the header rule -->
<article class="bg18181B b1pxsolid27272A br8px">
<h3 class="p16px bb1pxsolid27272A fs14px fw700 cFAFAFA">Weekly report</h3>
<div class="pt16px px16px pb16px fs14px cA1A1AA lh1-7">
Body copy starts 16px below the divider.
</div>
</article>pt2rempadding-top: 2rem
20px. The default top spacing for sections and cards, and the point where rem units start while staying on the multiple-of-four scale.
When to use
A good default for ordinary cards and panels. Treat it as the baseline across the screen and adjust up or down only when needed.
<!-- Section rhythm inside a page -->
<section class="pt2rem pb2rem px2rem bt1pxsolid27272A">
<h2 class="fs2-4rem fw700 cFAFAFA mb16px">Billing</h2>
<p class="fs14px cA1A1AA lh1-7">Section content</p>
</section>pt4rempadding-top: 4rem
40px. Enough top space for the eye to rest.
When to use
Use it where the whitespace itself carries meaning: hero sections, the first block of a page, the first content under a fixed header.
<!-- Hero: generous space under a fixed header -->
<header class="pf t0 l0 w100p h6rem bg18181B zi100">Header</header>
<section class="pt4rem pb4rem px2rem tac">
<h1 class="fs4rem fw800 cFAFAFA mb16px">Ship faster</h1>
<p class="fs16px c71717A">Subtitle</p>
</section>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>Three card densities built from a single spacing scale. Pick values from the scale instead of inventing them.
<!-- One density scale, three card sizes -->
<div class="dg gtcr3-1fr gap2rem">
<!-- Compact: dense tables and list rows -->
<article class="pt12px pb12px px16px bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA ttu ls0-05em mb4px">Compact</p>
<p class="fs14px cFAFAFA">12px top padding</p>
</article>
<!-- Comfortable: the default for cards -->
<article class="pt2rem pb2rem px2rem bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA ttu ls0-05em mb4px">Comfortable</p>
<p class="fs14px cFAFAFA">20px top padding</p>
</article>
<!-- Spacious: marketing surfaces -->
<article class="pt4rem pb4rem px3-2rem bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA ttu ls0-05em mb4px">Spacious</p>
<p class="fs14px cFAFAFA">40px top padding</p>
</article>
</div>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.
Padding never collapses
Vertical margins between adjacent elements collapse into one, but padding never collapses. If a parent's top padding and a child's top margin appear to merge, padding is not the culprit.
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.
Vertical padding on inline elements
Top padding on an inline element grows its background but does not push the line box, so it overlaps the lines above and below. Add dib to make it behave like a badge.