The margin property is a shorthand that sets the outer spacing on all four sides of an element — outside the border. It sets margin-top, margin-right, margin-bottom, and margin-left.
Use one to four values (length, percentage, or auto). Negative values pull neighbors closer. It is not inherited. Initial value for each side is 0.
Not deprecated and not experimental. Core box-model spacing supported in all browsers for decades.
margin is outside the border. padding is inside the border, between the border and the content.
margin: [ <length> | <percentage> | auto ]{1,4} | initial | inherit;1 value = all sides. 2 values = top/bottom | left/right. 3 values = top | left/right | bottom. 4 values = top | right | bottom | left (clockwise).
| Value | Description | Try it |
|---|---|---|
<length> | Fixed size such as 16px or 1rem. Negatives allowed | Try it |
| Two values | Top/bottom, then left/right — for example 8px 24px | Try it |
| Four values | Top, right, bottom, left in clockwise order | Try it |
auto | Browser picks the margin. With a set width, 0 auto centers horizontally | Try it |
<percentage> | Relative to the containing block’s inline size (usually its width) | Try it |
initial | Resets each side to 0 | Try it |
inherit | Inherits the computed margin from the parent | Try it |
marginPick how many sides you need, then write one to four values.
margin with 1–4 values (or use a longhand like margin-top).margin: 0 auto.| Goal | Typical value |
|---|---|
| Equal space all around | margin: 1rem; |
| More side space than vertical | margin: 0.5rem 1.5rem; |
| Center a fixed-width block | margin: 0 auto; (plus a width) |
The middle (amber) box is the target. Change its margin and watch the space outside its border.
Each snippet shows only the margin you are studying. Use Try It Yourself for a live editor.
Apply the same margin on every side.
<style>
.box {
margin: 1rem;
}
</style>
<div class="box">Box A</div>
<div class="box">Box B</div>margin: 1rem sets top, right, bottom, and left to 1rem.px, em, and rem all work.Set vertical and horizontal margins with two values.
<style>
.box {
margin: 0.5rem 1.5rem;
}
</style>
<div class="box">Target</div>0.5rem applies to top and bottom.1.5rem applies to left and right.autoCenter a block that has a set width.
<style>
.box {
width: 60%;
margin: 0.75rem auto;
}
</style>
<div class="box">Centered</div>auto on the sides. Left and right share leftover space equally.margin: 0.75rem auto keeps vertical margin and centers horizontally.If spacing looks smaller than expected, collapsing or auto rules are often why.
Adjacent top/bottom margins of blocks in normal flow may merge into one margin (the larger value), not a sum.
For elements like span, vertical margins do not affect layout. Horizontal margins still apply.
Even top and bottom percentage margins resolve against the containing block’s inline size (usually width), not its height.
auto needs leftover spaceHorizontal centering with auto fails if the box is full width or not a block-level box with a definite width.
Useful for overlaps, but easy to break responsive layouts. Prefer gap/padding when you only need breathing room.
margin is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and Internet Explorer for many years. Part of the CSS Box Model.
Bottom line: Safe for every layout. Logical longhands like margin-block are newer; the classic margin shorthand is universal. It is not a runtime API.
margin: 0 auto for horizontal centering.One line: margin sets space outside the border — use 1–4 values, or auto to center a sized block.
Learn the logical shorthand for block-axis margins.
8 people found this page helpful