inset-inline-start

inset-inline-start is a CSS property that sets the length that an element is offset in the starting inline direction. It’s sort of like declaring left in that it applies to positioned elements and offsets an element in the left direction, except its starting and ending points can changed based on the element’s direction, text-orientation and writing-mode, just like other logical properties.

The property is part of the CSS Logical Properties and Values Level 1 specification which is currently in Editor’s Draft status. That means the definition and information about it can change between now and official recommendation.

.element {
  inset-inline-start: 50px;
  position: relative; /* Apples to positioned elements */
  writing-mode: vertical-rl; /* Determines the block start direction */
}

So, for example, if the writing mode is set to horizontal-lr the inset-inline-start property will act just like setting left, offsetting an element from the left edge. You even need to specify an explicit position on the same element for it to take effect, just like physical offset properties.

But change the element’s writing-mode to something like vertical-lr and the “starting” edge is rotated in the vertical direction, acting more like the top instead.

Syntax

inset-inline-start: <'left'>;

• Initial value: auto
• Applies to: positioned elements
• Inherited: no
• Percentages: as for the corresponding physical property
• Computed value: same as corresponding left property
• Animation type: by computed value type

Values

inset-block takes a length value and supports global keywords. Its default value is auto.

/* Length values */
inset-inline-start: 50px;
inset-inline-start: 4em;
inset-inline-start: 3.5rem
inset-inline-start: 25vh;

/* Percentage values */
inset-inline-start: 50%;

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

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

Browser support

Demo

Related properties

• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end

Further reading

• CSS Logical Properties and Values Level 1 specification (Editor’s Draft)
• MDN Documentation
• Understanding Logical Properties And Values (Smashing Magazine)
• CSS Logical Properties (Adrian Roselli)
• Bidirectional horizontal rules in CSS (Hussein Al Hammad)