CSS margin-block-start Property

What You’ll Learn

The margin-block-start property sets outer spacing on the block-start side of an element using logical layout instead of physical top margin.

Introduction

The margin-block-start property in CSS is used to set the margin at the start of an element’s block, depending on the writing mode, directionality, and text orientation.

This property is part of the logical properties and values, which are designed to work with different writing modes and text directions, such as left-to-right (LTR) or right-to-left (RTL).

Definition and Usage

Apply margin-block-start when you need spacing before an element on the block axis without affecting the block-end side. Common uses include offsetting content below a heading, adding space above a section, or creating rhythm in stacked layouts.

📝 Syntax

The syntax for the margin-block-start property allows you to set a margin value in various units, such as pixels, ems, percentages, etc.

element {
  margin-block-start: value;
}

Here, value can be a length, percentage, or one of the global values like auto, inherit, initial, or unset.

Basic Example

p {
  margin-block-start: 20px;
}

💎 Property Values

🎯 Default Value

The default value of the margin-block-start property is 0, meaning there is no margin applied by default at the start of the block. Override it when you need spacing before an element on the block axis.

Examples Gallery

Add block-start margin to a paragraph, offset sections below headings, see writing-mode behavior, and compare with physical margin-top.

<style>
  p {
    margin-block-start: 20px;
  }
</style>

<h1>Example of margin-block-start</h1>
<p>This paragraph has a 20px margin at the start of the block.</p>

.section {
  margin-block-start: 2rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.box {
  margin-block-start: 1rem;
  padding: 0.75rem;
  background: #eff6ff;
}

.vertical {
  writing-mode: vertical-rl;
}

/* Logical */
.note {
  margin-block-start: 1.5rem;
}

/* Physical equivalent in horizontal LTR */
.note {
  margin-top: 1.5rem;
}

Logical vs Physical Margins

♿ Accessibility

• Preserve reading order — Logical margins respect direction and writing mode, which helps RTL and multilingual users.
• Maintain heading-to-content spacing — Block-start margin improves visual grouping without breaking semantics.
• Avoid negative margins on focusable elements — Negative block-start margins can overlap previous interactive controls.
• Test zoom and small screens — Large block-start margins can push content off-screen on narrow viewports.
• Use semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices