CSS inset-inline-start Property

Description

The inset-inline-start CSS property is used to specify the distance between the inline (horizontal) edge of an element and the corresponding edge of its containing block. This property is particularly useful in modern CSS for creating flexible and responsive layouts. It allows developers to control the positioning of elements relative to their containing blocks along the inline axis, which is typically horizontal. By setting values for inset-inline-start, designers can precisely position elements, such as text or images, and adjust their placement based on the available space and layout requirements, making it a valuable tool for creating visually appealing and adaptive web designs.

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>

  <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-start: 20px;
  background-color: #c8c800;
}

Result

Editor