CSS margin-inline-start Property

This property defines the logical margin at the start of an element based on the writing direction and mode.

selector { margin-inline-start: value; }
0 The default value which applies no margin to the start of the element.
<length> Defines a fixed distance using units like px, em, or rem.
<percentage> Sets a margin relative to the inline size of the containing block.
auto The browser calculates a suitable margin to use.

Code Examples

A basic example showing how the margin-inline-start property reacts to a right-to-left direction.

<div style="direction: rtl; border: 2px solid #333333; padding: 10px;">
  <div style="margin-inline-start: 50px; background-color: #dddddd; padding: 10px;">
    Since the direction is set to RTL, this 50px margin appears on the right side.
  </div>
</div>

An advanced example using JavaScript to toggle the layout direction and dynamically update the logical margin.

<div id="ui-container" style="direction: ltr; padding: 20px; border: 1px solid #000000;">
  <div id="logic-box" style="margin-inline-start: 20px; width: 100px; height: 100px; background-color: #0077ff;"></div>
  <button onclick="toggleFlow()" style="margin-top: 10px;">Toggle Layout Direction</button>
</div>

<script>
function toggleFlow() {
  const container = document.getElementById("ui-container");
  const box = document.getElementById("logic-box");
  const currentDir = container.style.direction;
  
  // Toggle direction and update the margin using JS
  container.style.direction = currentDir === "ltr" ? "rtl" : "ltr";
  box.style.setProperty("margin-inline-start", "60px");
  
  console.log("Direction is now: " + container.style.direction);
}
</script>

Pro Tip

You can use the shorthand margin-inline to set both start and end margins at once. If you find yourself writing margin-left and then a separate right-to-left block for margin-right, delete both and use margin-inline-start to handle it in one line. It makes your CSS cleaner and much easier to maintain as your site grows.

Deep Dive

Think of margin-inline-start as the smart version of margin-left. In a standard left-to-right layout like English, it acts exactly like margin-left. However, if the page switches to a right-to-left language like Arabic, it automatically flips to behave like margin-right. It respects the flow of the content rather than physical screen coordinates. It is like calling the driver side of a car the "driver side" instead of the "left side." If you take that car to the UK, the driver side is now on the right, but it is still the driver side. This property targets the edge where text starts according to the writing-mode and direction properties.

Best Practices

Use this instead of margin-left when building layouts that need to support multiple languages or reading directions. It saves you from writing separate CSS overrides for right-to-left layouts. It is part of the logical properties spec designed to make the web more globally compatible without extra code bloat. If you are starting a new project today, logical properties should be your default choice over physical ones.

Common Pitfalls

The most common mistake is forgetting that this property relies on the writing-mode and direction of the parent or element. If you have not defined these, it defaults to left-to-right behavior. Also, be aware that it will override physical properties like margin-left if both are applied and the cascade favors the logical property. It can also be confusing if you mix physical and logical properties in the same declaration block, leading to unexpected layout results.

Accessibility

This property improves accessibility by ensuring that spacing remains logical and consistent for users reading in different languages. It prevents layout breakage that could hide content or make it difficult to navigate for people using languages that read from right to left.

Dev Data Table: margin-inline-start property

default 0
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.marginInlineStart = "20px";
js_syntax_2 element.style.setProperty("margin-inline-start", "20px");
js_note In JavaScript, use camelCase to access this property directly on the style object or use the string name with 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...