CSS inset-inline-start Property

This property defines the logical start offset of an element in the inline dimension, mapping to either the left or right side depending on the text direction.

selector { inset-inline-start: value; }
auto The browser calculates the offset based on the default layout flow.
<length> Sets a specific distance from the start edge using units like px, em, or rem.
<percentage> Sets the offset as a percentage relative to the width of the containing block.

Code Examples

A basic example showing an absolute positioned square offset from the logical start of its container by 20 pixels.

<div style="position: relative; width: 100%; height: 100px; background-color: #f0f0f0; border: 1px solid #cccccc;">
  <div style="position: absolute; inset-inline-start: 20px; width: 50px; height: 50px; background-color: #0077ff;"></div>
</div>

An advanced example using JavaScript to toggle the direction of the container, demonstrating how the red box automatically flips its anchor side.

<div id="container" dir="ltr" style="position: relative; width: 100%; height: 150px; background-color: #eeeeee;">
  <div id="box" style="position: absolute; inset-inline-start: 10px; top: 10px; width: 100px; height: 100px; background-color: #ff3300; color: #ffffff; padding: 10px;">Logic Box</div>
</div>
<button onclick="flipDirection()" style="margin-top: 20px;">Flip Direction</button>
<script>
function flipDirection() {
  const container = document.getElementById("container");
  const isRtl = container.getAttribute("dir") === "rtl";
  container.setAttribute("dir", isRtl ? "ltr" : "rtl");
  const box = document.getElementById("box");
  box.style.insetInlineStart = "50px";
}
</script>

Pro Tip

You can use this property in conjunction with CSS variables to create dynamic layouts that respond to user settings. It is essentially a shortcut that saves you from writing media queries or extra classes just to flip a sidebar or a button's position when switching between LTR and RTL modes.

Deep Dive

Think of inset-inline-start like a flexible anchor. In a standard English layout (Left-to-Right), this property acts exactly like the physical "left" property. However, if you switch the document to a Right-to-Left language like Arabic, the anchor automatically flips to the right side of the container. It respects the flow of the line of text rather than the physical sides of the screen. For this to work, the element must have its position property set to something other than static, such as relative, absolute, or fixed. It effectively future-proofs your layout for international users without requiring separate CSS files for different languages.

Best Practices

Use this instead of "left" or "right" if you are building a site that might ever be translated into multiple languages. It keeps your code dry by handling the positioning logic for you based on the "dir" attribute of your HTML tags. Pair it with other logical properties like "inset-inline-end" to maintain consistency across the entire UI.

Common Pitfalls

The most common mistake is trying to use this on an element that is still "position: static". Just like the old physical properties, it won't move the element unless you've defined a positioning context. Also, be careful when mixing logical properties like this with physical properties like "left" on the same element; the browser might prioritize one over the other in ways you don't expect.

Accessibility

Properly using logical properties ensures that as the language and reading direction change, the visual hierarchy of your page remains logical for the user. This helps maintain the intended order of information for users who rely on screen readers or spatial navigation in different locales.

Dev Data Table: inset-inline-start property

default auto
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.insetInlineStart = "20px";
js_syntax_2 element.style.setProperty("inset-inline-start", "20px");
js_note When manipulating this via JavaScript, ensure the value is passed as a string and remember that it responds to the element's computed directionality.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 41, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...