padding-right
Sets the inner spacing on the right side of an element. Use the prefix pr followed by a value with unit. Useful for spacing between content and the right edge, scrollbar compensation, etc.
pr Ambiguity Notice
pr has two meanings
| Class | CSS | Distinction Criteria |
|---|---|---|
pr | position: relative | Used alone without unit |
pr16px | padding-right: 16px | With number + unit, it becomes padding-right |
pr2rem | padding-right: 2rem | With number + unit, it becomes padding-right |
pr alone = position: relative, pr{number}{unit} = padding-right. Distinguished by the presence of a number and unit.
Class Patterns
Prefix pr + value + unit. Use px for values under 20px, rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
pr4px | padding-right: 4px | minimum spacing |
pr8px | padding-right: 8px | narrow spacing |
pr12px | padding-right: 12px | default spacing |
pr16px | padding-right: 16px | generous spacing |
pr2rem | padding-right: 2rem (20px) | rem unit starting point |
pr2-4rem | padding-right: 2.4rem (24px) | decimals expressed with hyphens |
pr3-2rem | padding-right: 3.2rem (32px) | wide spacing |
pra | padding-right: 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 | pr8px | pr0-8rem |
| 12px | pr12px | pr1-2rem |
| 16px | pr16px | pr1-6rem |
| 20px | pr20px | pr2rem |
| 24px | pr24px | pr2-4rem |
| 32px | pr32px | pr3-2rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
pr8px | 8px | Input field right margin |
pr12px | 12px | Table cell right gap |
pr16px | 16px | Card inner right gap |
pr2rem | 20px | Container right margin |
Code Examples
<!-- pr alone vs pr + unit distinction -->
<div class="pr">position: relative</div>
<div class="pr16px">padding-right: 16px</div>
<div class="pr2rem">padding-right: 2rem (20px)</div>
<!-- Input field with icon -->
<div class="pr">
<input type="text" class="w100p py8px pl12px pr4rem" placeholder="Search..." />
<svg class="pa r12px t50p" width="16" height="16">...</svg>
</div>
<!-- Asymmetric card padding -->
<div class="pt16px pr2-4rem pb16px pl16px bg18181B br8px">
Wider padding only on the right (reserve icon area)
</div>
<!-- Apply left/right simultaneously with px -->
<div class="px2rem py16px bg18181B br8px">
px2rem = pl2rem + pr2rem
</div>Tips & Notes
Apply left and right simultaneously with px
If left and right padding are the same, use px16px to apply pl16px pr16px at once.
Avoid confusing pr with position: relative
pr alone is position: relative. To apply padding-right, you must append a number and unit: pr16px, pr2rem.