The margin-block property is a shorthand for margin-block-start and margin-block-end. It sets outer spacing on the block axis.
In a horizontal writing mode (the usual default), that maps to top and bottom — like margin-top / margin-bottom. With a vertical writing-mode, it can map to the physical left/right sides instead. It is not inherited. Each side starts at 0.
Not deprecated. Cross-browser since about April 2021. Prefer it over physical top/bottom when writing mode may change.
Pair with margin-inline for the other axis. Together they replace the classic four physical margins in writing-mode-aware layouts.
margin-block: [ <length> | <percentage> | auto ]{1,2} | initial | inherit;1 value = both block-start and block-end. 2 values = block-start, then block-end.
| Value | Description | Try it |
|---|---|---|
| One length | Same margin on block-start and block-end, such as 1rem | Try it |
| Two values | Start then end, such as 0.5rem 1.5rem | Try it |
auto | Browser chooses the block-axis margin (same idea as physical auto) | Try it |
<percentage> | Percent of the containing block (layout-dependent, often its width) | Try it |
With writing-mode | Shows how block margins map when text flows vertically | Try it |
initial | Resets both sides to 0 | Try it |
inherit | Inherits from the parent element | Try it |
margin-blockThink in block-start / block-end instead of top / bottom.
margin-block with one value (both sides) or two (start, end).margin-inline if you also need the inline axis.writing-mode if the page may switch orientation.In horizontal-tb | Usually maps to |
|---|---|
margin-block-start | margin-top |
margin-block-end | margin-bottom |
margin-block: 1rem | Like margin-top and margin-bottom: 1rem |
The middle (amber) box is the target. Change margin-block in a horizontal writing mode.
Each snippet shows only margin-block (plus writing-mode when needed). Use Try It Yourself for a live editor.
One value sets block-start and block-end together.
<style>
.box {
margin-block: 1rem;
}
</style>
<div class="box">Target</div>1rem applies to both block-start and block-end.1rem.1rem.Two values set block-start, then block-end.
<style>
.box {
margin-block: 0.5rem 1.5rem;
}
</style>
<div class="box">Target</div>0.5rem is block-start (usually top).1.5rem is block-end (usually bottom).margin-block-start / margin-block-end separately.Block margins follow the writing mode, not always top/bottom.
<style>
.stack {
writing-mode: vertical-rl;
}
.box {
margin-block: 1rem;
}
</style>
<div class="stack">
<div class="box">Target</div>
</div>writing-mode: vertical-rl makes lines run vertically.margin-block still means start/end of the block axis.Logical names are easy to mix up with physical top/bottom.
In vertical writing modes, block-start/end can map to physical left/right. Check writing-mode before debugging.
In normal flow, adjacent block-axis margins may collapse just like classic top/bottom margins.
margin can overrideA later margin shorthand sets all four physical sides and can wipe logical longhands depending on cascade order.
Safe in modern browsers (about 2021+). For very old IE-only targets, use physical margin-top / margin-bottom.
margin-block does not set left/right in horizontal mode. Use margin-inline for that axis.
margin-block is a browser CSS property (logical box model). Node.js, Deno, and Bun do not apply it.
Supported in modern browsers since about April 2021. Part of CSS Logical Properties and Values.
Bottom line: Safe for modern sites. Fall back to margin-top/margin-bottom only if you must support Internet Explorer. It is not a runtime API.
margin-inline for the other axis.One line: margin-block sets start/end margins on the block axis — writing-mode aware spacing.
Learn the longhand for the block-end outer margin.
8 people found this page helpful