margin-right
Sets the outer spacing on the right side of an element. Use the prefix mr followed by a value with unit. Useful for spacing between inline elements or gaps between text and icons.
Class Patterns
Prefix mr + value + unit. Use px for values under 20px, and rem (1rem = 10px) for 20px and above.
| Class | CSS Output | Description |
|---|---|---|
mr4px | margin-right: 4px | minimum spacing |
mr8px | margin-right: 8px | between icon and text |
mr12px | margin-right: 12px | default spacing |
mr16px | margin-right: 16px | generous spacing |
mr2rem | margin-right: 2rem (20px) | rem unit starting point |
mr2-4rem | margin-right: 2.4rem (24px) | decimals expressed with hyphens |
mr3-2rem | margin-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 | mr8px | mr0-8rem |
| 12px | mr12px | mr1-2rem |
| 16px | mr16px | mr1-6rem |
| 20px | mr20px | mr2rem |
| 24px | mr24px | mr2-4rem |
| 32px | mr32px | mr3-2rem |
Common Values
| Class | Actual Size | Usage |
|---|---|---|
mr4px | 4px | Fine gap between icon and text |
mr8px | 8px | Gap between inline elements |
mr16px | 16px | Gap between tags and badges |
mr2rem | 20px | Navigation item gap |
Code Examples
<!-- Icon + Text Gap -->
<span class="dif aic">
<svg class="mr8px" width="16" height="16">...</svg>
Text
</span>
<!-- Inline tag list -->
<span class="dib mr8px mb8px py4px px12px bg27272A br4px">HTML</span>
<span class="dib mr8px mb8px py4px px12px bg27272A br4px">CSS</span>
<span class="dib mr8px mb8px py4px px12px bg27272A br4px">JS</span>
<!-- Responsive Gap -->
<div class="mr2rem sm-mr8px">
Desktop 20px, Mobile 8px Right Gap
</div>Auto Value
mra applies margin-right: auto. Used to push elements to the left in flex containers.
<!-- Separate logo left and navigation right -->
<header class="df aic py16px px2rem">
<div class="mra">Logo</div>
<nav class="df gap2rem">
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>Tips & Notes
Replaceable with gap
In flex/grid containers, using gap instead of mr is cleaner. Use df gap8px to set uniform spacing between children.
mra left alignment
Applying mra to the first child in a flex container pushes the remaining elements to the right. Useful for separating a logo from navigation in a header.