The margin-right property sets the margin area on the right of an element. A positive value moves neighbors farther away on the right; a negative value pulls them closer.
It is part of the box model (outside the border), is not inherited, and always targets the physical right edge. Prefer margin-inline-end when spacing should follow text direction (LTR/RTL).
Not deprecated. Core length, percentage, and auto values work across modern browsers.
margin-right: <length> | <percentage> | auto | inherit;Example: margin-right: 1.5rem;. Values may be positive, zero, or negative.
| Value | Description | Try it |
|---|---|---|
<length> | Fixed size such as 16px or 1em | Try it |
<percentage> | Relative to the containing block’s width (inline size) | Try it |
auto | Absorbs leftover horizontal space (often used to push or center) | Try it |
| Negative length | Pulls the next content toward the element | Try it |
0 / initial | No right margin (initial value is 0) | Try it |
inherit | Takes the parent’s margin-right | Try it |
margin-rightUse it to create space after a box on its physical right side.
1rem, 24px) or a percentage of the container width.auto when you want leftover space absorbed on the right (for example to keep a fixed-width block on the left).margin-inline-end instead.| Piece | Required? | Role |
|---|---|---|
| Any element (typical) | Yes | Applies broadly; table internals use border-spacing instead |
Length, %, or auto | Yes | Sets the right outer space |
| Inherited | No | Set on each element that needs it |
Defined width (for auto) | Often | Centering / push-left with auto needs free horizontal space |
Change margin-right on the yellow box and watch the gap before the next box.
Each snippet focuses on margin-right. Use Try It Yourself for a live editor.
Add a fixed gap on the right of a box.
<style>
.card {
margin-right: 24px;
}
</style>
<span class="card">Card</span>
<span>Next</span>.card.24px. Outer space appears on the physical right.Size the right margin from the container width.
<style>
.box {
margin-right: 10%;
}
</style>
<span class="box">Box</span>
<span>Next</span>Let leftover space go to the right so the box stays on the left.
<style>
.wrap {
width: 220px;
}
.box {
width: 80px;
margin-right: auto;
}
</style>
<div class="wrap">
<div class="box">Left</div>
</div>margin-right: auto. Unused space goes to the right.margin-left and margin-right) centers the box instead.If the right gap looks wrong or missing, check these first.
In RTL, margin-right still means right — not the end of the text. Use margin-inline-end for direction-aware spacing.
Percentage margins resolve against the containing block’s inline size (width in horizontal writing modes).
Use padding-right for inner space (backgrounds extend into padding). Use margin for space between separate boxes.
Unlike top/bottom, left and right margins between siblings do not merge into one gap.
margin-right: auto with a fixed width keeps the box left-aligned. Pair with margin-left: auto to center.
margin-right is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.
Length, percentage, and auto values work in all modern browsers and older engines.
Bottom line: Safe for everyday right spacing. Remember RTL vs logical properties. It is not a runtime API.
0. Not inherited.margin-left: auto.One line: margin-right adds outer space on the right — outside the border, before the next neighbor.
Set outer space above an element.
8 people found this page helpful