CSS margin-inline-end Property

This property sets the margin at the logical end of an element's inline axis, adapting automatically to the document's direction and writing mode.

selector { margin-inline-end: value; }
auto The browser calculates a suitable margin to use.
<length> Specifies a fixed distance using units like px, em, rem, or vh.
<percentage> Defines the margin as a percentage relative to the inline size of the containing block.

Code Examples

In this RTL example, the margin appears on the left of Item 1 because that is the logical end of the inline flow.

<div style="display: flex; direction: rtl; border: 2px solid #333333; padding: 10px;">
  <div style="margin-inline-end: 30px; background: #007bff; color: #ffffff; padding: 10px;">Item 1</div>
  <div style="background: #28a745; color: #ffffff; padding: 10px;">Item 2</div>
</div>

This advanced example uses JavaScript to toggle the container direction, demonstrating how the margin-inline-end property automatically flips from the right to the left.

<div id="container" style="writing-mode: horizontal-tb; direction: ltr; border: 1px solid #cccccc; padding: 20px;">
  <button id="testBtn" style="margin-inline-end: 50px; padding: 10px 20px; cursor: pointer;">Responsive Margin</button>
  <span>Text Content</span>
</div>

<script>
const container = document.getElementById("container");
const btn = document.getElementById("testBtn");

// Toggle direction via JS to see the margin flip sides
container.onclick = function() {
  const currentDir = this.style.direction;
  this.style.direction = currentDir === "ltr" ? "rtl" : "ltr";
  // Accessing the property via JS
  console.log("End margin is currently: " + getComputedStyle(btn).marginInlineEnd);
};
</script>

Pro Tip

When building a navigation bar with a list of items, use margin-inline-end on the list items to create gaps. This way, the gap always appears on the trailing side of the item, whether the user is reading from left to right or right to left, without needing a single media query or direction-specific class.

Deep Dive

Think of margin-inline-end as a dynamic finish line buffer. In a standard English layout, the text flows from left to right, so the end is the right side. If you switch the direction to Arabic or Hebrew, the end becomes the left side. This property is part of the CSS Logical Properties module, which prioritizes the flow of content over physical directions like left or right. It maps to margin-right in a horizontal left-to-right (LTR) environment and margin-left in a horizontal right-to-left (RTL) environment. If you are working with vertical writing modes, the end could even be the bottom. By using logical properties, you create a layout that is smart enough to flip itself without you having to write specific CSS overrides for different languages.

Best Practices

Use margin-inline-end instead of margin-right when building components intended for global use. It ensures your spacing remains consistent between elements when a site is translated into Right-to-Left languages. For the sake of maintainability, try to stay consistent: if you start using logical properties like inline-end, avoid mixing them with physical properties like margin-right on the same element to prevent specificity or override confusion.

Common Pitfalls

The most common headache occurs when you mix logical and physical properties. If you define margin-right: 10px; and then margin-inline-end: 20px;, the browser has to decide which one wins based on the cascade and specificity. Also, keep in mind that very old browsers do not recognize logical properties, so if you are supporting legacy systems from a decade ago, you might still need physical fallbacks.

Accessibility

Properly defined margins ensure that interactive elements like buttons and links have enough separation, preventing accidental clicks for users with motor impairments. Using logical properties ensures this separation remains intact regardless of the language or text direction, maintaining a consistent user experience for everyone.

Dev Data Table: margin-inline-end property

default 0
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2021
js_syntax_1 element.style.marginInlineEnd = "20px";
js_syntax_2 element.style.setProperty("margin-inline-end", "20px");
js_note When manipulating this property in JavaScript, use camelCase for the style object property or the exact string for the setProperty method.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 41, "Safari": 12.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 12.2, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...