inset-inline-start

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

* Some parts of this feature may have varying levels of support.

The inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

This inset property has no effect on non-positioned elements.

Try it

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: horizontal-tb;
direction: rtl;

writing-mode: vertical-lr;

<section id="default-example">
  <div class="example-container" id="example-element">
    <div id="abspos">
      I am absolutely positioned with inset-inline-start: 50px
    </div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

#example-element {
  border: 0.75em solid;
  padding: 0.75em;
  position: relative;
  width: 100%;
  min-height: 200px;
  unicode-bidi: bidi-override;
}

#abspos {
  background-color: yellow;
  color: black;
  border: 3px solid red;
  position: absolute;
  inset-inline-start: 50px;
  inline-size: 140px;
  min-block-size: 80px;
}

Syntax

css
/* <length> values */
inset-inline-start: 3px;
inset-inline-start: 2.4em;
inset-inline-start: calc(anchor(--myAnchor 50%) + 10px);
inset-inline-start: anchor-size(width);

/* <percentage>s of the width or height of the containing block */
inset-inline-start: 10%;

/* Keyword value */
inset-inline-start: auto;

/* Global values */
inset-inline-start: inherit;
inset-inline-start: initial;
inset-inline-start: revert;
inset-inline-start: revert-layer;
inset-inline-start: unset;

The shorthand for inset-inline-start and inset-inline-end is inset-inline.

Values

The inset-inline-start property takes the same values as the left property.

Formal definition

Initial valueauto
Applies topositioned elements
Inheritedno
Percentageslogical-width of containing block
Computed valuesame as box offsets: top, right, bottom, left properties except that directions are logical
Animation typea length, percentage or calc();

Formal syntax

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

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Setting inline start offset

HTML

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

CSS

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

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

Result

Specifications

Specification
CSS Logical Properties and Values Level 1
# propdef-inset-inline-start
CSS Positioned Layout Module Level 3
# propdef-inset-inline-start

Browser compatibility

Report problems with this compatibility data on GitHub
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inset-inline-start
anchor()
Experimental
anchor-size()
Experimental
auto

Tip: you can click/tap on a cell for more information.

Full support
In development. Supported in a pre-release version.
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

See also