CSS inset-inline-start Property

Definition and Usage

The inset-inline-start property sets the logical inline-start inset of a positioned element. It maps to a physical offset—left, right, top, or bottom—depending on writing-mode, direction, and text-orientation.

In default horizontal LTR text it behaves like left. In RTL it usually maps to the right. It has no effect on non-positioned elements. The initial value is auto. Pair it with inset-inline-end, or use the inset-inline shorthand.

CSS Syntax

Same value types as top / left: auto, lengths, or percentages of the containing block’s logical width.

Property Values

How to Use inset-inline-start

Position the element first, then offset from the logical inline-start edge.

1. Set position to relative, absolute, fixed, or sticky.
2. Add inset-inline-start with a length or percentage (for example 20px).
3. Check LTR and RTL (or your writing mode). The offset should stay on the inline-start side.
4. Prefer this over left when the layout must flip with text direction.

Live Preview

An absolutely positioned box inside a relative stage. Change the inset or writing direction.

CSS Examples

Each snippet keeps only what inset-inline-start needs. Use Try It Yourself for a live editor.

<style>
  .box { position: relative; height: 120px; }
  .item {
    position: absolute;
    inset-inline-start: 20px;
  }
</style>

<div class="box">
  <div class="item">Inline start</div>
</div>

<style>
  .box {
    position: relative;
    height: 120px;
    direction: rtl;
  }
  .item {
    position: absolute;
    inset-inline-start: 20px;
  }
</style>

<div class="box">
  <div class="item">Inline start</div>
</div>

<style>
  .box { position: relative; height: 160px; }
  .item {
    position: absolute;
    writing-mode: vertical-rl;
    inset-inline-start: 20px;
  }
</style>

<div class="box">
  <div class="item">Inline start</div>
</div>

Key Takeaways