CSS margin-block-end Property

What You’ll Learn

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

Introduction

The margin-block-end property in CSS is part of the logical properties and values module, which allows for writing CSS in a way that is more consistent across different writing modes, such as left-to-right, right-to-left, and vertical text.

This property sets the margin at the end of the block axis, which can be at the bottom or top of the element, depending on the writing mode.

Definition and Usage

Apply margin-block-end when you need spacing after an element on the block axis without affecting the block-start side. Common uses include separating stacked cards, paragraphs, form fields, and section blocks.

📝 Syntax

The syntax for the margin-block-end property is simple. It can accept a variety of length units or keywords to define the margin size.

element {
  margin-block-end: value;
}

Basic Example

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

💎 Property Values

🎯 Default Value

The default value for margin-block-end is 0, meaning no margin is applied by default. Override it when you need spacing after an element on the block axis.

Examples Gallery

Add block-end margin to a paragraph, space stacked cards, see writing-mode behavior, and compare with physical margin-bottom.

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

<p>This paragraph has a margin block end of 20px.</p>
<p>The next paragraph follows after the block-end gap.</p>

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

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

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

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

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

Logical vs Physical Margins

♿ Accessibility

• Preserve reading order — Logical margins respect direction and writing mode, which helps RTL and multilingual users.
• Maintain section separation — Block-end margin improves visual grouping between content blocks.
• Avoid negative margins on focusable elements — Negative block-end margins can overlap the next interactive control.
• Test zoom and small screens — Large block-end margins can push content off-screen on narrow viewports.
• Use semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices