padding-left
Sets the inner spacing on the left side of an element. Use the prefix pl followed by a value with unit. Useful for content indentation, list indents, and reserving icon space.
Class Patterns
Prefix pl + value + unit. Use px for values under 20px, rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
pl4px | padding-left: 4px | minimum spacing |
pl8px | padding-left: 8px | narrow spacing |
pl12px | padding-left: 12px | default spacing |
pl16px | padding-left: 16px | generous spacing |
pl2rem | padding-left: 2rem (20px) | rem unit starting point |
pl2-4rem | padding-left: 2.4rem (24px) | decimals expressed with hyphens |
pl3-2rem | padding-left: 3.2rem (32px) | wide spacing |
pl4rem | padding-left: 4rem (40px) | large indentation |
Unit Comparison
Comparison of the same size expressed in px and rem. Based on: html { font-size: 10px }
| Size | px Class | rem Class |
|---|---|---|
| 8px | pl8px | pl0-8rem |
| 12px | pl12px | pl1-2rem |
| 16px | pl16px | pl1-6rem |
| 20px | pl20px | pl2rem |
| 24px | pl24px | pl2-4rem |
| 32px | pl32px | pl3-2rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
pl8px | 8px | Input field inner left margin |
pl12px | 12px | Table cell left gap |
pl16px | 16px | Card inner left gap, left border compensation |
pl2rem | 20px | Container left margin |
pl4rem | 40px | Reserve icon area (left icon + text) |
Padding You Can See
Only padding-left is applied to the outer box, with the blue box left untouched. The faint band on the left is exactly the padding.
pl16px
16px. A good fit for list rows with a leading icon.
pl2rem
20px. A good fit for quotes and one level of indentation.
pl4rem
40px. Two levels of indentation, or deeper hierarchy.
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
pl16pxpadding-left: 16px
The default left gap for list rows and input fields, keeping text off the border.
When to use
Use it wherever left aligned text lives: lists, table cells, form fields.
<!-- List row: text aligned past a leading icon -->
<li class="df aic gap8px py12px pl16px pr16px bb1pxsolid27272A">
<span class="w8px h8px br4px bg34D399"></span>
<span class="fs14px cFAFAFA">Deploy finished</span>
</li>pl2rempadding-left: 2rem
20px. The base size of one indentation step.
When to use
Use it to express one level of hierarchy: quotes, sub lists, replies. In stepped structures, stack multiples of this value for consistency.
<!-- Quote block set in from the body text -->
<blockquote class="pl2rem pr2rem py16px bl2pxsolid6366F1 fs14px cA1A1AA lh1-7">
Indentation makes the quote read as a separate voice.
</blockquote>pl4rempadding-left: 4rem
40px. The size of two indentation steps.
When to use
Use it where depth must be visible, such as tree views and nested comments. Beyond three levels the readable width shrinks fast, so consider a different representation.
<!-- Second level of a nested tree -->
<ul class="fs14px cA1A1AA">
<li class="py8px pl2rem">Components</li>
<li class="py8px pl4rem">Button</li>
<li class="py8px pl4rem">Input</li>
</ul>Code Examples
<!-- Left accent border pattern -->
<div class="pl16px py12px">
Content accented with left border
</div>
<!-- Reserve icon area -->
<div class="pr pl4rem py12px bg18181B br8px">
<svg class="pa l12px t50p" width="20" height="20">...</svg>
List item with reserved icon space on the left
</div>
<!-- Input field left margin -->
<input type="text" class="w100p py8px pl12px pr12px" placeholder="Enter text..." />
<!-- Apply left/right simultaneously with px -->
<div class="px2rem py16px bg18181B br8px">
px2rem = pl2rem + pr2rem
</div>
<!-- Asymmetric padding -->
<div class="pt16px pr16px pb16px pl3-2rem bg18181B br8px">
Wider padding only on the left (side indicator area)
</div>A comment thread where each nesting level adds one step of the same indentation scale.
<!-- Comment thread: one padding step per nesting level -->
<div class="df fdc gap12px">
<article class="p16px bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA mb4px">jane</p>
<p class="fs14px cFAFAFA lh1-7">Top level comment</p>
</article>
<!-- One level in: 20px of left padding -->
<div class="pl2rem">
<article class="p16px bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA mb4px">sam</p>
<p class="fs14px cFAFAFA lh1-7">Reply</p>
</article>
</div>
<!-- Two levels in: 40px, the same step applied twice -->
<div class="pl4rem">
<article class="p16px bg18181B b1pxsolid27272A br8px">
<p class="fs12px cA1A1AA mb4px">jane</p>
<p class="fs14px cFAFAFA lh1-7">Reply to the reply</p>
</article>
</div>
</div>Tips & Notes
Apply left and right simultaneously with px
If left and right padding are the same, use px2rem to apply pl2rem pr2rem at once. This is an Atomic CSS exclusive shorthand.
With left accent border
Use pl16px with bl4pxsolid6366F1 to create left accent patterns for blockquotes, alert boxes, etc.
Padding never collapses
Horizontal margins never collapse to begin with, and padding never collapses in any direction. A parent's left padding and a child's left margin simply add up.
Percentage padding resolves against width
Percentage padding is resolved against the width of the containing block, so the indentation changes as the parent resizes. Use fixed units when the steps must stay constant.
If you support RTL
For right-to-left languages such as Arabic and Hebrew, padding-left lands on the wrong side. Consider the logical property family for indentation that has to flip with the writing direction.