CSS inset-inline Property

This property is a shorthand that sets the logical start and end offsets of an element in the inline direction.

selector { inset-inline: <value> [value]?; }
auto The browser calculates the offset based on the element's position property.
<length> Specifies a fixed distance using units like px, em, rem, or vh.
<percentage> Defines the offset as a percentage relative to the width of the containing block.

Code Examples

A basic example showing a badge positioned 20px from the start of its container.

<style>
.container {
  position: relative;
  width: 500px;
  height: 200px;
  background-color: #f0f0f0;
}
.badge {
  position: absolute;
  inset-inline: 20px auto;
  padding: 10px;
  background-color: #ff0000;
  color: #ffffff;
}
</style>
<div class="container">
  <div class="badge">New Alert</div>
</div>

An advanced example using JavaScript to toggle a sliding side panel using logical inline offsets.

<style>
.panel {
  position: fixed;
  inset-block: 0;
  inset-inline: auto -300px;
  width: 300px;
  background-color: #333333;
  transition: inset-inline 0.3s ease;
}
.panel.active {
  inset-inline: auto 0;
}
</style>
<div id="sidePanel" class="panel"></div>
<button onclick="togglePanel()">Toggle Panel</button>
<script>
function togglePanel() {
  const el = document.getElementById("sidePanel");
  const isActive = el.classList.contains("active");
  el.style.insetInline = isActive ? "auto -300px" : "auto 0px";
  el.classList.toggle("active");
}
</script>

Pro Tip

If you need to center an absolutely positioned element horizontally, you can set inset-inline to 0 and margin-inline to auto. This is much cleaner than the old method of using left: 50% and a negative transform.

Deep Dive

Think of inset-inline as the logical replacement for left and right. In a standard English layout, start is left and end is right. However, if the page direction is set to Right-to-Left (RTL), like in Arabic or Hebrew, the start becomes the right side. Using this property ensures your layout adapts to the user's language without you having to write specific CSS overrides. It maps to inset-inline-start and inset-inline-end. If you provide one value, it applies to both sides. If you provide two, the first handles the start and the second handles the end.

Best Practices

Stop hard-coding left and right if you plan on going global. Use inset-inline for any positioned element where horizontal placement matters relative to text flow. It makes your stylesheets much leaner because you do not need to flip values for RTL layouts manually. Always ensure the element has a position value like relative, absolute, or fixed, otherwise these offsets do nothing.

Common Pitfalls

The biggest mistake is forgetting that this property only works on positioned elements. If your element is still position: static, which is the default, these values are ignored. Also, remember that the inline direction refers to the flow of text. If you use a vertical writing mode, inset-inline will actually control the top and bottom offsets instead of left and right.

Accessibility

Ensure that using offsets does not cause elements to overlap or hide critical content like text or navigation buttons. Shifting elements visually can also confuse users if the visual order does not match the focus order of the document.

Dev Data Table: inset-inline property

default auto
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.insetInline = "10px 20px";
js_syntax_2 element.style.setProperty("inset-inline", "20px");
js_note When using camelCase in JavaScript, the property name becomes insetInline. Use quote-encapsulated strings for values like "10px" or "#ffffff".
browsers { "Chrome": 87, "Edge": 87, "Firefox": 63, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...