CSS margin-block Property

The margin-block logical shorthand property sets the margin space for the start and end sides of an element in the block direction.

selector { margin-block: value; }
0 The default value that applies no margin to the block start or end.
auto The browser calculates a margin based on available space in the block dimension.
<length> Specifies a fixed distance using units like px, em, rem, or vh.
<percentage> Sets the margin as a percentage relative to the inline size of the containing block.

Code Examples

A basic example showing uniform logical block margins applied to a card element.

<style>
.card {
  margin-block: 40px;
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #cccccc;
}
</style>
<div class="card">This element has a 40px margin at both the start and end of its block axis.</div>

An advanced example demonstrating how margin-block values automatically reorient when the writing-mode is toggled via JavaScript.

<style>
.container {
  writing-mode: horizontal-tb;
  border: 2px solid #333333;
  padding: 10px;
}
.item {
  margin-block: 50px 10px;
  background-color: #0074d9;
  color: #ffffff;
  padding: 15px;
}
</style>
<div id="demo" class="container">
  <div class="item">Logical Margin Item</div>
</div>
<button onclick="flipMode()">Toggle Writing Mode</button>
<script>
function flipMode() {
  const el = document.getElementById("demo");
  const isVert = el.style.writingMode === "vertical-rl";
  el.style.writingMode = isVert ? "horizontal-tb" : "vertical-rl";
  el.style.borderColor = isVert ? "#333333" : "#ff4136";
}
</script>

Pro Tip

You can use margin-block: auto; inside a flex or grid container to easily push elements away from each other in the block direction. It is a cleaner way to handle logical spacing than traditional margin hacks.

Deep Dive

Think of margin-block as a set of dynamic bumpers on the top and bottom of a shipping crate. In a standard top-to-bottom layout, these bumpers sit on the top and bottom. However, if you rotate that crate to a vertical writing mode (common in East Asian typography), those bumpers stay at the start and end of the flow, which would now be the left and right sides. It allows you to define spacing based on the flow of content rather than physical screen coordinates like top or bottom. When you provide one value, it applies to both start and end. If you provide two values, the first targets the start and the second targets the end.

Best Practices

Use margin-block instead of margin-top and margin-bottom when building layouts that need to be localized for different writing directions. It makes your CSS more robust and reduces the need to override physical properties when the writing-mode changes.

Common Pitfalls

A common mistake is forgetting that margin-block refers to the vertical axis only in horizontal writing modes. If your text direction changes, your margins will rotate with it. Also, be aware that this shorthand will override any existing margin-block-start or margin-block-end declarations defined earlier in the cascade.

Accessibility

Proper use of block margins ensures clear visual separation between sections of content, which helps users with cognitive or visual impairments distinguish between different groups of information.

Dev Data Table: margin-block property

default 0
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.marginBlock = "20px";
js_syntax_2 element.style.setProperty("margin-block", "10px 30px");
js_note When using the camelCase style object property, remember it maps to the logical start and end margins based on the element's current writing mode.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...