inset-inline-start - CSS: Cascading Style Sheets 编辑

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 value	auto
Applies to	positioned elements
Inherited	no
Percentages	logical-width 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'>

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

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• The properties which defines other insets: inset-block-start, inset-block-end, and inset-inline-end
• The mapped physical properties: top, right, bottom, and left
• writing-mode, direction, text-orientation