CSS margin-inline-end Property

What You’ll Learn

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

Introduction

The margin-inline-end property in CSS is part of the Logical Properties and Values module.

This property sets the margin space on the end side of an element, based on the writing mode, directionality, and text orientation of the document.

Unlike physical properties like margin-right, margin-inline-end adapts to the writing mode, making it more versatile for internationalization and responsive design.

Definition and Usage

Apply margin-inline-end when you need spacing after an element on the inline axis without affecting the inline-start side. Common uses include separating horizontal items, adding space after icons or labels, and building flexible multilingual layouts.

📝 Syntax

The syntax for the margin-inline-end property is straightforward. It accepts any valid CSS length, percentage, or the keywords auto or inherit.

element {
  margin-inline-end: value;
}

value can be a length (e.g., px, em, rem), percentage, or keywords like auto or inherit.

Basic Example

.box {
  margin-inline-end: 20px;
}

💎 Property Values

🎯 Default Value

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

Examples Gallery

Add inline-end margin to a box, space horizontal items, see RTL direction behavior, and compare with physical margin-right.

<style>
  .box {
    margin-inline-end: 20px;
    border: 1px solid #000;
    padding: 10px;
  }
</style>

<div class="box">This box has a margin-inline-end of 20px.</div>

.chip {
  margin-inline-end: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #eff6ff;
  border-radius: 999px;
}

.item {
  margin-inline-end: 1rem;
  padding: 0.75rem;
  background: #eff6ff;
}

.rtl {
  direction: rtl;
}

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

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

Logical vs Physical Margins

♿ Accessibility

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

💡 Best Practices