The margin-left property sets the margin area on the left of an element. A positive value moves the box farther from neighbors on the left; a negative value pulls it closer.
It is part of the box model (outside the border), is not inherited, and always targets the physical left edge. Prefer margin-inline-start when spacing should follow text direction (LTR/RTL).
Not deprecated. Core length, percentage, and auto values work across modern browsers.
margin-left: <length> | <percentage> | auto | inherit;Example: margin-left: 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 element toward content on its left | Try it |
0 / initial | No left margin (initial value is 0) | Try it |
inherit | Takes the parent’s margin-left | Try it |
margin-leftUse it to indent a box or create space on its physical left side.
1rem, 24px) or a percentage of the container width.auto when you want leftover space absorbed on the left (for example to push a fixed-width block right).margin-inline-start instead.| Piece | Required? | Role |
|---|---|---|
| Any element (typical) | Yes | Applies broadly; table internals use border-spacing instead |
Length, %, or auto | Yes | Sets the left outer space |
| Inherited | No | Set on each element that needs it |
Defined width (for auto) | Often | Centering / push-right with auto needs free horizontal space |
Change margin-left on the yellow box and watch the gap before it.
Each snippet focuses on margin-left. Use Try It Yourself for a live editor.
Add a fixed gap on the left of a box.
<style>
.card {
margin-left: 24px;
}
</style>
<span>Prev</span>
<span class="card">Card</span>.card.24px. Outer space appears on the physical left.Size the left margin from the container width.
<style>
.box {
margin-left: 10%;
}
</style>
<div class="box">Box</div>Let leftover space go to the left so the box sits on the right.
<style>
.wrap {
width: 220px;
}
.box {
width: 80px;
margin-left: auto;
}
</style>
<div class="wrap">
<div class="box">Right</div>
</div>margin-left: auto. Unused space goes to the left.margin-left and margin-right) centers the box instead.If the left gap looks wrong or missing, check these first.
In RTL, margin-left still means left — not the start of the text. Use margin-inline-start for direction-aware spacing.
MDN: when width, padding, border, and both horizontal margins are all fixed, margin-left may be treated as if it were auto.
Percentage margins resolve against the containing block’s inline size (width in horizontal writing modes).
Use padding-left 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-left 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 left spacing. Remember RTL vs logical properties. It is not a runtime API.
0. Not inherited.margin-right: auto.One line: margin-left adds outer space on the left — outside the border, before the content edge.
Set outer space on the physical right edge.
8 people found this page helpful