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 |
pla | padding-left: 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 | 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) |
Code Examples
<!-- Left accent border pattern -->
<div class="bl4pxsolid6366F1 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>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.