The margin-inline property is a shorthand for margin-inline-start and margin-inline-end. It sets outer spacing on the inline axis.
In horizontal left-to-right layout that maps to left and right. With direction: rtl or a vertical writing-mode, the physical sides update automatically. The property is not inherited.
Not deprecated. Broad support since about 2021. Prefer it over margin-left / margin-right when direction can change.
margin-inline: <start> <end>? | auto | inherit;One value sets both sides. Two values set start then end: margin-inline: 1rem 2rem;.
| Value | Description | Try it |
|---|---|---|
| One length | Same margin on start and end (e.g. 1rem) | Try it |
| Two lengths | Start then end (e.g. 8px 24px) | Try it |
auto | Useful for centering with a set width: margin-inline: auto | Try it |
<percentage> | Relative to the containing block’s inline size | Try it |
With direction: rtl | Start/end flip to physical right/left | Try it |
0 / inherit | Reset both sides, or inherit from the parent | Try it |
margin-inlineUse it whenever side spacing should follow text direction.
margin-inline: auto with a width to center a block.margin-left / margin-right for RTL-ready UI.| Piece | Required? | Role |
|---|---|---|
| 1 or 2 values | Yes | Sets start (and end) inline margins |
| Writing mode / direction | Affects mapping | Controls which physical sides get the margins |
| Inherited | No | Set on each element that needs it |
Width + auto | For centering | margin-inline: auto centers a sized block |
Change margin-inline and watch the yellow box inset from the container sides.
Each snippet focuses on margin-inline. Use Try It Yourself for a live editor.
Inset both inline sides with one value.
<style>
.box {
margin-inline: 1rem;
}
</style>
<div class="box">Inset</div>1rem.direction and the logical sides still make sense.Set start and end separately.
<style>
.box {
margin-inline: 8px 24px;
}
</style>
<div class="box">Start 8 / End 24</div>8px on inline-start.24px on inline-end.Center a fixed-width block on the inline axis.
<style>
.box {
width: 8rem;
margin-inline: auto;
}
</style>
<div class="box">Centered</div>margin-inline: auto. Free space splits on both inline sides.margin-left/right: auto.If sides look swapped or centering fails, check these first.
Mapping depends on writing-mode and direction. In vertical modes, inline margins can land on top/bottom.
margin-inline: 8px 24px is not “left then right” in every language — it is inline-start then inline-end.
Centering with margin-inline: auto needs a width (or max-width) smaller than the container and a block that can take auto margins.
Margin is outside the border. Use padding-inline for inner side space that keeps the background.
Setting margin-inline resets start and end together. Set a longhand afterward if only one side should differ.
margin-inline is a browser CSS property for logical margins. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers (broad support from about 2021). Prefer it for direction-aware side margins.
Bottom line: Safe for modern sites. Fall back to margin-left/right only if you must support very old browsers. It is not a runtime API.
auto centers a sized block on the inline axis.One line: use margin-inline for side margins that stay correct when text direction changes.
Set only the logical inline-end margin.
8 people found this page helpful