inset-inline-start

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.

/* <length> values */
inset-inline-start: 3px;
inset-inline-start: 2.4em;

/* <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: unset;

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

Syntax

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

<'top'>

Examples

Setting inline start offset

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

Specifications

Specification Status Comment
CSS Logical Properties and Values LevelĀ 1
The definition of 'inset-inline-start' in that specification.
Editor's Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
inset-inline-startChrome Full support 69
Disabled
Full support 69
Disabled
Disabled From version 69: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge Full support 79
Disabled
Full support 79
Disabled
Disabled From version 79: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
Firefox Full support 63
Full support 63
No support 41Ā ā€” 63
Alternate Name
Alternate Name Uses the non-standard name: offset-inline-start
No support 38Ā ā€” 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 56
Disabled
Full support 56
Disabled
Disabled From version 56: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari No support NoWebView Android No support NoChrome Android Full support 69
Disabled
Full support 69
Disabled
Disabled From version 69: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 63
Full support 63
No support 41Ā ā€” 63
Alternate Name
Alternate Name Uses the non-standard name: offset-inline-start
No support 38Ā ā€” 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 48
Disabled
Full support 48
Disabled
Disabled From version 48: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support Ā 
Full support
No support Ā 
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also