CSS inset-inline-end Property

Description

The inset-inline-end CSS property is used to define the distance between the inline-end edge (the right edge in left-to-right writing modes) of an element and its containing block. It is particularly useful for positioning and aligning elements within a layout. You can use it to set precise margins or padding on the inline-end side of an element, ensuring accurate placement and spacing in your web design. This property is part of the CSS Logical Properties module, which allows for more adaptable and language-independent layouts by considering the logical, rather than physical, direction of content.

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.insetInlineEnd

Interactive Demo

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

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

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

inset-inline-end: 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-end: 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-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}

Result

Editor