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 |
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 |
Padding You Can See
Only padding-right is applied to the outer box, with the blue box left untouched. The faint band on the right is exactly the padding.
pr16px
16px. A good fit for rows with a trailing icon.
pr2rem
20px. Enough room for a small button or icon.
pr4rem
40px. Room for an absolutely positioned button.
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
pr16pxpadding-right: 16px
The default gap at the right end of a row, keeping a trailing chevron or status marker off the border.
When to use
Use it wherever something sits at the right edge: list rows, table cells, navigation links.
<!-- Row with a trailing chevron that needs breathing room -->
<a class="df aic jcsb py12px pl16px pr16px bb1pxsolid27272A tdn">
<span class="fs14px cFAFAFA">Account settings</span>
<span class="fs14px c71717A">to-r</span>
</a>pr2rempadding-right: 2rem
20px. About the room a single small icon button needs inside a field.
When to use
Use it on inputs with an overlaid clear button or visibility toggle so the value never runs underneath the button.
<!-- Input that leaves room for a clear button -->
<div class="pr">
<input type="text" class="w100p py8px pl12px pr2rem br8px b1pxsolid27272A" />
<button class="pa t0 r0 h100p px8px bgn bn cp c71717A fs12px">x</button>
</div>pr4rempadding-right: 4rem
40px. About the room a close button or a short text button needs.
When to use
Use it to reserve space for an absolutely positioned button layered over the content. Match the value to the button width plus its offset.
<!-- Card with an absolutely positioned close button -->
<div class="pr p2rem pr4rem bg18181B b1pxsolid27272A br8px">
<p class="fs14px cFAFAFA lh1-7">
The text stops before the button instead of running under it.
</p>
<button class="pa t16px r16px w2rem h2rem br4px bg27272A cFAFAFA bn cp">x</button>
</div>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>A search field with a button pinned to the right. The right padding reserves the button area so the typed value never hides beneath it.
<!-- Search field with a button pinned to the right -->
<form class="pr w100p maxw50rem">
<!-- 8rem of right padding reserves the button area -->
<input
type="search"
class="w100p py12px pl16px pr8rem fs14px br8px b1pxsolid27272A bg18181B cFAFAFA"
/>
<button class="pa t8px r8px py8px px16px bg6366F1 cFFFFFF br6px bn cp fs14px">
Search
</button>
</form>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.
Padding never collapses
Horizontal margins never collapse to begin with, and padding never collapses in any direction. A parent's right padding and a child's right margin simply add up.
Percentage padding resolves against width
Percentage padding is resolved against the width of the containing block. When you are reserving room for a button, use fixed units so the gap does not drift as the width changes.
If you support RTL
For right-to-left languages such as Arabic and Hebrew, padding-right lands on the wrong side. Consider the logical property family for spacing that has to flip with the writing direction.