W3cubDocs

/CSS

inset-block

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

/* <length> values */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* value applied to start and end */

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

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

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

Values

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

Formal definition

Initial value auto
Applies to positioned elements
Inherited no
Percentages logical-height of containing block
Computed value same as box offsets: top, right, bottom, left properties except that directions are logical
Animation type a length, percentage or calc();

Formal syntax

<'top'>{1,2}

Examples

Setting inline start and end offsets

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: 20px 50px;
  background-color: #c8c800;
}

Result

Specifications

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
inset-inline 69
Disabled
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.
79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
63
63
41 — 63
Uses the non-standard name: offset-inline
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.
No 56
Disabled
56
Disabled
Disabled From version 56: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
inset-inline No 69
Disabled
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.
63
63
41 — 63
Uses the non-standard name: offset-inline
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.
48
Disabled
48
Disabled
Disabled From version 48: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
No No

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block