CSS inset-inline-start Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The inset-inline-start CSS property defines the logical offset of an element’s start edge along the inline axis of its containing block. In practice this means it sets how far the element’s start-side should be placed from the corresponding start edge of the containing block, using the logical box model rather than a fixed physical side. It applies to positioned elements (those with a non‑static position) and is used in place of physical offsets when you want layouts that adapt to different writing directions and writing modes.

Which physical side the property controls depends on the element’s writing orientation and direction: the inline axis and the notion of “start” are determined by the writing-mode and direction properties. For example, in a typical horizontal left‑to‑right flow the inline start corresponds to the left edge, while in a right‑to‑left flow it corresponds to the right edge; in vertical writing modes the inline axis is vertical, so the mapped physical edge will be top or bottom depending on the mode. Because of this mapping, inset-inline-start is a useful logical substitute for physical properties such as left in multi‑lingual interfaces.

In real-world layouts you’ll often use inset-inline-start together with its logical counterparts — for example the shorthand inset, the inline opposite inset-inline-end, or block‑axis properties like inset-block-start — to express offsets in a writing‑mode‑neutral way. When both inline start and inline end are specified on a positioned element, they can together constrain or determine the element’s inline size (similar to how setting both left and right on an absolutely positioned element affects its width). Using the logical offset model makes it much easier to build components that automatically mirror for RTL languages and adapt across different writing systems.

Definition

Initial value: auto
Applies to: positioned elements
Inherited: no
Computed value: same as box offsets: top, right, bottom, left properties except that directions are logical
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.insetInlineStart

Interactive Demo

inset-inline-start: 20px;
writing-mode: horizontal-tb;

inset-inline-start: 20px;
writing-mode: vertical-rl;

inset-inline-start: 20%;
writing-mode: horizontal-tb;
direction: rtl;

inset-inline-start: 20%;
writing-mode: vertical-lr;

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

inset-inline-start: auto | <length-percentage>

Values

<length-percentage>Specifies distance in px, pt, cm, etc. Negative values are allowed.

Example

HTML

<div class="examples">

  <section class="example ltr">

    <h2>LTR (default)</h2>

    <div class="box">

      <div class="badge">Badge</div>

      <p class="content">This box uses inset-inline-start to position the badge.</p>

    </div>

  </section>



  <section class="example rtl" dir="rtl">

    <h2>RTL</h2>

    <div class="box">

      <div class="badge">بِطَاقَة</div>

      <p class="content">مثال على اتجاه من اليمين إلى اليسار.</p>

    </div>

  </section>

</div>

CSS

:root {
  --bg: #f6f8fb;
  --card: #ffffff;
  --accent: #0070f3;
  --muted: #0f172a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--muted);
}

.examples {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.example {
  width: 320px;
}

.example h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
}

.box {
  position: relative; /* containing block for the absolutely positioned badge */
  height: 120px;
  padding: 1rem;
  background: var(--card);
  border: 1px solid #e6edf6;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.badge {
  position: absolute;
  inset-inline-start: 16px; /* logical property: left in LTR, right in RTL */
  top: 12px;
  background: var(--accent);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
}

.content {
  margin-top: 2.5rem;
  color: #0b1220;
}

/* The element with dir="rtl" demonstrates that inset-inline-start moves the badge to the right in RTL */
.rtl .badge {
  /* no additional rules required  -  inset-inline-start adapts automatically */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS inset-inline-start property. Hover over a browser icon to see the version that first introduced support for this CSS property.