CSS margin-inline Property

The margin-inline property is a shorthand that sets the logical start and end margins of an element based on the writing mode.

selector { margin-inline: <margin-inline-start> <margin-inline-end>; }
auto The browser calculates and applies a margin based on the available space.
<length> Defines a fixed space using units like px, em, rem, or vh.
<percentage> Sets the margin as a percentage relative to the inline size of the containing block.

Code Examples

A basic example showing how a single value applies uniform margins to both logical sides of an element.

<div style="margin-inline: 40px; background-color: #eeeeee; border: 2px solid #333333;">
  This element has a 40px margin on both the start and end sides regardless of the language direction.
</div>

An advanced example using JavaScript to toggle document direction, demonstrating how margin-inline adapts to the start and end of the text flow.

<div id="interactiveBox" style="margin-inline: 10px 100px; background-color: #f0f0f0; padding: 20px; transition: margin-inline 0.5s;">
  Watch my margins shift based on direction.
</div>
<button onclick="toggleFlow()">Toggle RTL / LTR</button>

<script>
function toggleFlow() {
  const box = document.getElementById("interactiveBox");
  const isRtl = document.body.dir === "rtl";
  document.body.dir = isRtl ? "ltr" : "rtl";
  // Using JS to dynamically update logical margins
  box.style.marginInline = "50px 20px";
  console.log("Direction flipped. Start margin is now 50px, End is 20px.");
}
</script>

Pro Tip

You can save several lines of code by using this shorthand. Instead of writing separate declarations for margin-left and margin-right, use margin-inline: auto; to center a block element within its container while respecting logical flow.

Deep Dive

Think of margin-inline like the side bumpers on a bowling lane. In a standard English layout (left-to-right), these bumpers are on the left and right. But if you switch to a language like Arabic (right-to-left), those 'side' bumpers swap positions. By using margin-inline instead of margin-left or margin-right, you are telling the browser to handle that swap for you. It targets the inline axis, which is the direction text flows in a line. If you provide one value, it applies to both sides. If you provide two, the first applies to the start and the second to the end.

Best Practices

Use margin-inline instead of specific left or right margins when you want your layout to be internationally friendly. It simplifies your CSS by reducing the need for separate right-to-left (RTL) stylesheets. Always pair it with other logical properties like padding-inline or inset-inline for a consistent, logical layout system.

Common Pitfalls

A common mistake is forgetting that margin-inline only affects the horizontal flow in standard horizontal writing modes. If you are trying to add space at the top or bottom, you need margin-block. Also, be aware that percentages are always calculated against the width of the parent container, even if the writing mode is vertical.

Accessibility

This property improves accessibility for international users by ensuring that layout spacing and visual hierarchy remain intact when content is translated or flipped into different reading directions.

Dev Data Table: margin-inline property

default 0
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.marginInline = "20px 40px";
js_syntax_2 element.style.setProperty("margin-inline", "20px 40px");
js_note In JavaScript, use camelCase for the style object property or the full kebab-case string when using the setProperty method.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...