The margin-inline-start property sets the logical inline-start 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-left. In RTL it usually matches margin-right. 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-left when direction can change.
margin-inline-start: <length> | <percentage> | auto | inherit;Same value types as other margins. Example: margin-inline-start: 1.5rem;.
| Value | Description | Try it |
|---|---|---|
<length> | Fixed start 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 | Start maps to the physical right in horizontal RTL | Try it |
0 / initial | No start margin (initial value is 0) | Try it |
inherit | Takes the parent’s margin-inline-start | Try it |
margin-inline-startUse it for space before an item on the inline axis.
1rem).margin-left when the page may use RTL.margin-inline instead.| Piece | Required? | Role |
|---|---|---|
Length / % / auto | Yes | Sets the inline-start outer space |
| Direction / writing mode | Affects mapping | Chooses which physical edge is “start” |
| Inherited | No | Set on each element that needs it |
| Content before it | To see a gap | Start margin pushes the element away from earlier inline content |
Change margin-inline-start on the yellow box. The gap appears before it on the inline axis.
Each snippet focuses on margin-inline-start. Use Try It Yourself for a live editor.
Add space before a box on the inline axis.
<style>
.b {
margin-inline-start: 24px;
}
</style>
<span>A</span>
<span class="b">B</span>.b.24px. Outer space appears on the inline-start side.The same property flips with direction.
<style>
.row {
direction: rtl;
}
.b {
margin-inline-start: 24px;
}
</style>
<div class="row">
<span>A</span>
<span class="b">B</span>
</div>direction: rtl. Inline start is on the right.margin-left — physical left would not flip.Offset content from the inline start of its container.
<style>
.note {
margin-inline-start: 1.5rem;
}
</style>
<div class="note">Indented note</div>padding-inline-start instead.If the gap is on the “wrong” side, check these first.
Mapping depends on direction and writing-mode. In RTL horizontal text, start is typically right; in some vertical modes it can be top or bottom.
If you set both margin-inline-start and margin-left, 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.
In a flex row, margin-inline-start: auto can push an item toward the end. A lone block may need a set width for auto to matter.
Use padding-inline-start when the background should include the space.
margin-inline-start 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 start margins.
Bottom line: Safe for modern sites. Fall back to margin-left/right only for very old browsers. It is not a runtime API.
0. Not inherited.margin-left for RTL.margin-inline when both sides need space.One line: use margin-inline-start for space before an element that stays correct when text direction changes.
Set the physical left margin of an element.
8 people found this page helpful