CSS inset-inline Property

Definition and Usage

The inset-inline property is a logical shorthand for inset-inline-start and inset-inline-end. It offsets a positioned element along the inline axis.

In horizontal left-to-right text it usually matches left and right. With direction: rtl or writing-mode: vertical-rl, the same values map to different physical edges. It has no effect on static elements.

CSS Syntax

One value sets start and end the same. Two values set start first and end second. Each longhand starts as auto. The property is not inherited.

Property Values

How to Use inset-inline

Position the element, then set inline-axis offsets.

1. Make a containing block if needed (position: relative on the parent).
2. Set the child to position: absolute (or another non-static value).
3. Add inset-inline with one or two lengths/percentages.
4. Optionally change direction or writing-mode to see which physical edges move.

Live Preview

The blue box is position: absolute. Change only inset-inline. Top/bottom stay fixed so you can see the inline stretch.

CSS Examples

Each snippet focuses on inset-inline. Position is required so the offsets apply. Use Try It Yourself for a live editor.

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 16px;
    bottom: 16px;
    inset-inline: 16px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">inset-inline: 16px</div>
</div>

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 16px;
    bottom: 16px;
    inset-inline: 8px 32px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">8px start, 32px end</div>
</div>

<style>
  .stage {
    position: relative;
    height: 160px;
    border: 1px dashed #94a3b8;
    writing-mode: vertical-rl;
  }
  .box {
    position: absolute;
    inset-block: 12px;
    inset-inline: 16px 32px;
    background: #2563eb;
    color: #fff;
  }
</style>

<div class="stage">
  <div class="box">Follows inline axis</div>
</div>

Key Takeaways