CSS margin-block-start Property

Definition and Usage

The margin-block-start property sets the outer margin on the block-start edge of an element. In a horizontal writing mode (the usual default), that maps to the physical top — like margin-top.

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-end). It is not inherited. The initial value is 0.

CSS Syntax

Same value types as margin-top, but the side is logical.

Property Values

How to Use margin-block-start

Think “space before this box in the writing flow,” not always “top.”

1. Decide how much gap you want before the element on the block axis.
2. Set margin-block-start with a length, percentage, or auto.
3. Use margin-block-end if you also need space after the element.
4. Test with writing-mode if orientation may change.

Live Preview

The middle (amber) box is the target. Change margin-block-start in a horizontal writing mode.

CSS Examples

Each snippet shows only margin-block-start (plus writing-mode when needed). Use Try It Yourself for a live editor.

<style>
  .box {
    margin-block-start: 1rem;
  }
</style>

<div class="box">Target</div>

<style>
  .box {
    margin-block-start: 5%;
  }
</style>

<div class="box">Target</div>

<style>
  .stack {
    writing-mode: vertical-rl;
  }

  .box {
    margin-block-start: 1rem;
  }
</style>

<div class="stack">
  <div class="box">Target</div>
</div>

Key Takeaways