CSS margin-block Property

What You’ll Learn

The margin-block property sets outer spacing on the block axis using logical sides instead of physical top and bottom.

Introduction

The margin-block property in CSS is a shorthand property that allows you to set the margin on the block start and block end sides of an element. In a block-level context, the block start refers to the top, and the block end refers to the bottom. However, in a writing mode where text flows vertically, these terms adapt accordingly.

This property provides a convenient way to control vertical margins in layouts, respecting the text direction and writing mode of the document.

Definition and Usage

Apply margin-block when you want block-axis spacing that stays correct in multilingual layouts, RTL pages, or vertical writing modes. Use one value for equal block-start and block-end margins, or two values for different spacing on each side.

📝 Syntax

The syntax for the margin-block property allows you to specify values for both the block start and block end margins.

element {
  margin-block: <margin-start> <margin-end>;
}

• <margin-start> — The margin for the block start side (top in horizontal writing modes).
• <margin-end> — The margin for the block end side (bottom in horizontal writing modes).

If only one value is provided, it applies to both the block start and block end sides.

Basic Example

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

💎 Property Values

🎯 Default Value

The default value for the margin-block property is 0, meaning there is no margin applied unless specified otherwise. You can override it with one or two values, or with the longhand properties margin-block-start and margin-block-end.

Examples Gallery

Set different block-start and block-end margins, use a single value, see writing-mode behavior, and compare with longhand properties.

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

<p>This paragraph has a margin of 20px at the top and 10px at the bottom.</p>

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

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

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

/* Shorthand */
.card {
  margin-block: 2rem 1rem;
}

/* Longhand equivalent */
.card {
  margin-block-start: 2rem;
  margin-block-end: 1rem;
}

Logical vs Physical Margins

♿ Accessibility

• Preserve reading order — Logical margins respect direction and writing mode, which helps RTL and multilingual users.
• Keep section spacing consistent — Use block-axis margins for vertical rhythm between headings and paragraphs.
• Do not hide content with negative margins — Negative block margins can overlap focusable elements.
• Test zoom and small screens — Large block margins can push content off-screen on narrow viewports.
• Combine with semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices