CSS margin-block-end Property

This property sets the margin at the logical end of an element's block dimension, adapting to the writing mode of the document.

selector { margin-block-end: value; }
0 The default value which applies no margin at the end of the block.
<length> Specifies a fixed distance using units like px, em, or rem.
<percentage> Defines the margin as a percentage relative to the inline size of the containing block.
auto The browser automatically calculates and applies a suitable margin.

Code Examples

A basic example showing how margin-block-end creates space below an element in a standard horizontal layout.

<div style="writing-mode: horizontal-tb; border: 2px solid #333333;">
  <p style="margin-block-end: 50px; background: #eeeeee;">This paragraph has a logical end margin of 50px below it.</p>
  <p style="background: #dddddd;">The gap above this text is created by the block-end margin of the previous element.</p>
</div>

An advanced example using JavaScript to toggle the writing mode, demonstrating how the margin-block-end automatically moves from the left side to the bottom.

<div id="box" style="writing-mode: vertical-rl; border: 2px solid #000000; padding: 10px; height: 200px;">
  <div id="item" style="margin-block-end: 30px; background: #007bff; color: #ffffff; padding: 10px;">Item 1</div>
  <div style="background: #ffc107; padding: 10px;">Item 2</div>
</div>
<button onclick="toggleFlow()">Toggle Flow Direction</button>
<script>
function toggleFlow() {
  const box = document.getElementById("box");
  const item = document.getElementById("item");
  if (box.style.writingMode === "vertical-rl") {
    box.style.writingMode = "horizontal-tb";
  } else {
    box.style.writingMode = "vertical-rl";
  }
  console.log("Current Block End Margin: " + getComputedStyle(item).marginBlockEnd);
}
</script>

Pro Tip

You can use the margin-block shorthand to set both the start and end margins in one line. It is a great way to keep your code lean while ensuring your block-level spacing is fully responsive to text direction changes.

Deep Dive

Think of your web page content like a stream of water flowing in a pipe. In a standard English layout, that water flows from top to bottom. The margin-block-end is the air gap you leave at the very end of that flow. If you change the direction of the pipe so the water flows from right to left, this logical property is smart enough to move that air gap to the left side automatically. It eliminates the need for you to manually swap margin-bottom for margin-left when dealing with different international writing modes. It targets the physical bottom in horizontal-tb mode, the physical left in vertical-rl mode, and the physical right in vertical-lr mode.

Best Practices

Stop thinking in terms of top, bottom, left, and right if you are building a global application. Use margin-block-end instead of margin-bottom whenever you want your spacing to remain relative to the end of your text flow. This makes your CSS much more maintainable and less brittle when your site is translated into languages like Arabic, Hebrew, or Japanese.

Common Pitfalls

The biggest trap is mixing physical properties and logical properties on the same element. If you define margin-bottom: 10px and margin-block-end: 20px, the browser has to decide which one wins based on the cascade, which can get messy. Also, remember that the percentage value is calculated based on the inline-size (usually width) of the container, not the height, which can be confusing for beginners.

Accessibility

Layout shifts can be a nightmare for users with cognitive disabilities. Using logical properties ensures that your visual spacing remains logical and consistent across different languages, which helps maintain a predictable reading structure and visual hierarchy.

Dev Data Table: margin-block-end property

default 0
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.marginBlockEnd
js_syntax_2 element.style.setProperty("margin-block-end", "20px")
js_note When using this in JavaScript, the property follows camelCase as marginBlockEnd. It is a powerful way to script layouts that remain consistent regardless of the user's language settings.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...