The margin-inline-end property sets the logical inline-end margin of an element. It maps to a physical side based on writing-mode and direction.
In horizontal left-to-right layout it usually matches margin-right. In RTL it usually matches margin-left. It is one half of the margin-inline shorthand and is not inherited.
Not deprecated. Broad support since about 2020. Prefer it over physical margin-right when direction can change.
margin-inline-end: <length> | <percentage> | auto | inherit;Same value types as other margins. Example: margin-inline-end: 1.5rem;.
| Value | Description | Try it |
|---|---|---|
<length> | Fixed end margin such as 16px or 1em | Try it |
<percentage> | Relative to the containing block’s inline size | Try it |
auto | Browser chooses a used value (often with flex/grid or sizing) | Try it |
With direction: rtl | End maps to the physical left in horizontal RTL | Try it |
0 / initial | No end margin (initial value is 0) | Try it |
inherit | Takes the parent’s margin-inline-end | Try it |
margin-inline-endUse it for space after an item on the inline axis.
1rem).margin-right when the page may use RTL.margin-inline instead.| Piece | Required? | Role |
|---|---|---|
Length / % / auto | Yes | Sets the inline-end outer space |
| Direction / writing mode | Affects mapping | Chooses which physical edge is “end” |
| Inherited | No | Set on each element that needs it |
| Sibling after it | To see a gap | End margin pushes content that follows on the inline axis |
Change margin-inline-end on the yellow box. The blue box shows the gap after it.
Each snippet focuses on margin-inline-end. Use Try It Yourself for a live editor.
Add space after a box on the inline axis.
<style>
.a {
margin-inline-end: 24px;
}
</style>
<span class="a">A</span>
<span>B</span>.a.24px. Outer space appears on the inline-end side.The same property flips with direction.
<style>
.row {
direction: rtl;
}
.a {
margin-inline-end: 24px;
}
</style>
<div class="row">
<span class="a">A</span>
<span>B</span>
</div>direction: rtl. Inline start is on the right.margin-right — physical right would not flip.Separate a label from following text.
<style>
.label {
margin-inline-end: 0.75rem;
font-weight: 700;
}
</style>
<span class="label">Name</span>
<span>Ada</span>padding-inline-end instead.If the gap is on the “wrong” side, check these first.
Mapping depends on direction and writing-mode. In RTL horizontal text, end is typically left; in some vertical modes it can be top or bottom.
If you set both margin-inline-end and margin-right, they can fight depending on cascade and mapping. Pick logical or physical consistently.
A later margin-inline declaration overrides this longhand. Order your rules carefully.
For even spacing between many siblings, container gap is often cleaner than end margins on every item.
Use padding-inline-end when the background should include the space.
margin-inline-end 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 2020). Prefer it for direction-aware end margins.
Bottom line: Safe for modern sites. Fall back to margin-right/left only for very old browsers. It is not a runtime API.
0. Not inherited.margin-right for RTL.margin-inline when both sides need space.One line: use margin-inline-end for space after an element that stays correct when text direction changes.
Set only the logical inline-start margin.
8 people found this page helpful