CSS inset-inline 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 property defines offsets along the inline axis of a box — that is, how far the element is placed from the inline-start and inline-end edges of its containing block. It is used to position an element in the inline direction when the element participates in CSS positioning; for example, when the element’s position makes it subject to offset calculations. Because it targets the inline axis rather than a fixed physical edge, it moves elements relative to the flow direction rather than always toward the left or right side.

Being a logical property, inset-inline adapts to writing mode and direction. In a horizontal left-to-right writing mode the inline-start/end map to the physical left/right edges, while in a right-to-left mode they swap; in vertical writing modes the inline axis becomes vertical, so the same property controls top/bottom movement in that context. This makes it the logical counterpart to legacy physical properties such as left and right, and it pairs with the block-axis sibling inset-block to fully define an element’s positioned offsets. There is also a shorthand that combines inline and block offsets when needed: inset.

In practical layout work, inset-inline is useful for creating direction-agnostic positioning rules: it simplifies responsive and internationalized layouts by avoiding separate rules for LTR and RTL content. Designers use it to nudge absolutely or relatively positioned elements along the inline axis, to align overlays or callouts with inline anchors, or to implement adaptive spacing that follows the document’s writing orientation. Because it participates in the normal offset model, it interacts with other layout behaviors (stacking, overflow, hit testing) the same way other positional offsets do, so it’s a helpful tool for keeping position logic consistent across different languages and writing modes.

Definition

Initial value: See individual properties
Applies to: positioned elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.insetInline

Interactive Demo

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

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

inset-inline: 5% 20%;
writing-mode: horizontal-tb;

inset-inline: 1rem auto;
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: <top>{1,2}

Values

<top>{1,2} The first value represents the start edge style, and the second value represents the end edge style. If only one value is given, it applies to both the start and end edges.

Example

HTML

<div class="examples">

    <div class="card" dir="ltr">

        <div class="card-title">LTR example</div>

        <div class="box">

            <div class="floating">Pinned to inline-start using inset-inline: 1rem auto;</div>

        </div>

    </div>



    <div class="card" dir="rtl">

        <div class="card-title">RTL example</div>

        <div class="box">

            <div class="floating">Same CSS; inline-start flips in RTL</div>

        </div>

    </div>

</div>

CSS

/* Container layout */
.examples {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #f4f6f8;
}

/* Card */
.card {
    width: 320px;
}

.card-title {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: #333;
}

/* Framed box where we position an element */
.box {
    position: relative; /* required for absolute children */
    height: 140px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border: 1px solid #e1e7ef;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

/* Example of using inset-inline */
.floating {
    position: absolute;
    inset-block: 1rem;            /* vertical offset: 1rem from the block start */
    inset-inline: 1rem auto;      /* inline-start: 1rem; inline-end: auto; flips with dir */
    padding: 0.5rem 0.75rem;
    background: #0b63ff;
    color: #fff;
    border-radius: 6px;
    min-width: 110px;
    box-shadow: 0 6px 18px rgba(11,99,255,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* Small responsive tweak */
@media (max-width: 720px) {
    .examples { flex-direction: column; }
    .card { width: 100%; }
}

Result

Editor

Browser Support

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