CSS margin-block-start Property

Sets the margin space at the start of an element's block dimension, adapting automatically to the writing mode.

selector { margin-block-start: value; }
<length> Specifies a fixed distance using units like px, em, or rem.
<percentage> Defines the margin as a percentage of the inline size of the containing block.
auto The browser calculates a suitable margin to use.

Code Examples

A basic example showing how to push a container down from its predecessor using a logical start margin.

<style>
.article-box {
  background-color: #f0f0f0;
  border: 2px solid #333333;
  margin-block-start: 50px;
  padding: 20px;
}
</style>
<div class="article-box">
  This box has a 50px margin at the start of the block flow.
</div>

Advanced example showing how the margin stays at the 'start' even when the writing mode is toggled via JavaScript.

<style>
  #dynamic-box {
    background-color: #007bff;
    color: #ffffff;
    padding: 20px;
    margin-block-start: 40px;
    writing-mode: horizontal-tb;
  }
</style>
<div id="dynamic-box">Logical Margin Box</div>
<button onclick="toggleDirection()">Toggle Writing Mode</button>
<script>
function toggleDirection() {
  const box = document.getElementById("dynamic-box");
  if (box.style.writingMode === "vertical-rl") {
    box.style.writingMode = "horizontal-tb";
  } else {
    box.style.writingMode = "vertical-rl";
  }
  console.log("Current margin-block-start: ", getComputedStyle(box).marginBlockStart);
}
</script>

Pro Tip

You can use the margin-block shorthand to set both the start and end margins at the same time. This is like putting a buffer at both the top and bottom of a box in one go, keeping your stylesheet clean and your lines of code low.

Deep Dive

Think of margin-block-start as the "front porch" of your element. In a standard English layout, that porch is at the top. But if you switch to a vertical writing mode used in some East Asian languages, that porch moves to the right or left side. This property is a logical property, meaning it is smarter than the old physical margin-top. It looks at the flow of your text and sticks to the 'start' of where content begins to stack. If you change the writing-mode or direction of your document, the margin moves with it, ensuring your design doesn't break when translated or reflowed.

Best Practices

Use margin-block-start instead of margin-top if you are building a global application. It makes your CSS much more robust because you won't have to write extra code to fix spacing when switching between horizontal and vertical layouts or different text directions. It's about writing code once that works everywhere.

Common Pitfalls

A common point of confusion is forgetting that 'block' refers to the stacking direction of elements like paragraphs. In a standard web page, this is vertical. Another thing to watch for is margin collapsing; just like margin-top, margin-block-start will collapse with the margins of adjacent elements if there is no padding or border in between them.

Accessibility

Generous margins help users with visual or cognitive impairments distinguish between different chunks of information. By using logical margins, you ensure that this visual separation remains consistent even if the user's browser or settings change the text orientation.

Dev Data Table: margin-block-start property

default 0
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.marginBlockStart = "20px";
js_syntax_2 element.style.setProperty("margin-block-start", "20px");
js_note When manipulating logical properties in JavaScript, use camelCase for the style object or the hyphenated string for setProperty.
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...