CSS inset-inline Property

Description

The CSS inset-inline property sets the distance between an element and its parent element in the inline direction. The inline direction is determined by the element's writing-mode and direction properties. For pages in English, the inline direction is left to right. The inset-inline property is a shorthand property for the inset-inline-start and inset-inline-end properties. The inset-inline-start property sets the distance between the start of the element and its parent element, and the inset-inline-end property sets the distance between the end of the element and its parent element. The inset-inline property can be set to one or two values. If the property is set to one value, that value will be applied to both the start and end of the element. If the property is set to two values, the first value will be applied to the start of the element and the second value will be applied to the end of the element.

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>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}

Result

Editor