inset-inline

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

inset-inline is a shorthand logical CSS property that sets the length that an element is offset in the inline direction combining inset-inline-start and inset-inline-end. It’s sort of like declaring right and left except its starting and ending points are determined by 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: 50px 15%;
  position: relative; /* Applies 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 property will act just like setting top and bottom and set the element’s offset from the bottom 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 “bottom” edge is rotated in the vertical direction, acting more like the left and right properties.

Syntax

inset-inline: <'top'> <'left'>;
  • Initial value: auto
  • Applies to: positioned elements
  • Inherited: no
  • Percentages: as for the corresponding physical property
  • Computed value: same as corresponding top and left properties
  • Animation type: by computed value type

Values

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

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

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

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

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

Browser support

IEEdgeFirefoxChromeSafariOpera
NoNo63+NoNoNo
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
No79+NoNoNo
Source: caniuse

Demo

Further reading