The margin-block-end property sets the outer margin on the block-end edge of an element. In a horizontal writing mode (the usual default), that maps to the physical bottom — like margin-bottom.
With a vertical writing-mode, it can map to left or right instead. It is one half of the margin-block shorthand (with margin-block-start). It is not inherited. The initial value is 0.
Not deprecated. Cross-browser since about January 2020. Prefer it over margin-bottom when writing mode may change.
Use margin-block-end for space after the element in the writing flow. Pair with margin-block-start when you need both sides separately.
margin-block-end: <length> | <percentage> | auto | initial | inherit;Same value types as margin-top / margin-bottom, but the side is logical.
| Value | Description | Try it |
|---|---|---|
<length> | Fixed size such as 1rem or 20px | Try it |
<percentage> | Percent of the containing block (layout-dependent, often its width) | Try it |
auto | Browser chooses the block-end margin | Try it |
With writing-mode | Shows how block-end maps when text flows vertically | Try it |
initial | Resets to 0 | Try it |
inherit | Inherits from the parent element | Try it |
margin-block-endThink “space after this box in the writing flow,” not always “bottom.”
margin-block-end with a length, percentage, or auto.margin-block-start if you also need space before the element.writing-mode if orientation may change.In horizontal-tb | Usually maps to |
|---|---|
margin-block-end | margin-bottom |
margin-block-end: 1rem | Like margin-bottom: 1rem |
The middle (amber) box is the target. Change margin-block-end in a horizontal writing mode.
Each snippet shows only margin-block-end (plus writing-mode when needed). Use Try It Yourself for a live editor.
A fixed length adds space after the box on the block axis.
<style>
.box {
margin-block-end: 1rem;
}
</style>
<div class="box">Target</div>margin-block-end: 1rem affects the block-end edge.1rem.A percentage sizes the block-end margin relative to the containing block.
<style>
.box {
margin-block-end: 5%;
}
</style>
<div class="box">Target</div>Block-end follows the writing mode, not always the physical bottom.
<style>
.stack {
writing-mode: vertical-rl;
}
.box {
margin-block-end: 1rem;
}
</style>
<div class="stack">
<div class="box">Target</div>
</div>writing-mode: vertical-rl makes lines run vertically.margin-block-end still means the end of the block axis.Logical “end” is easy to mix up with physical bottom.
In vertical writing modes, block-end can map to physical left or 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 this longhand depending on cascade order.
margin-block-end does not set block-start. Use margin-block-start or the margin-block shorthand for both.
margin-block-end is a browser CSS property (logical box model). Node.js, Deno, and Bun do not apply it.
Supported in modern browsers since about January 2020. Part of CSS Logical Properties and Values.
Bottom line: Safe for modern sites. Fall back to margin-bottom only if you must support Internet Explorer. It is not a runtime API.
margin-block with margin-block-start.0 — not inherited.One line: margin-block-end adds space after the element on the block axis — writing-mode aware.
Learn the longhand for the block-start outer margin.
8 people found this page helpful