CSS inset-inline-start attribute

Previous Page inset-inline-end
Next Page isolation

Definition and Usage

inset-inline-start property to set the distance between the starting end of the element in the line direction and its parent element.

Note:To make this property effective, it is necessary to specify position property.

CSS's inset-inline and inset-block properties are related to the CSS's top,bottom,left and right properties are very similar, but inset-block and inset-inline The property depends on the block direction and line direction.

Note:related CSS properties writing-mode and direction Defines the line direction. This affects the starting position of the element in the line direction and inset-inline-start The result of the property. For English pages, the line direction is from left to right, and the block direction is downward.

Example

Example 1

Set the distance between the starting end of the positioned div element and its parent element in the line direction:

div {
  inset-inline-start: 50px;
}

Try It Yourself

Example 2

When the writing-mode When the property value is set to vertical-rl, the direction of the line is downward. The result is that the starting end of the element moves from the left to the top:

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3

When the direction When the property value is set to rtl, the direction of the line is from right to left. There is a minor typo in the description; it should be 'The starting end of the element still remains on the right (because for rtl, the starting end is naturally on the right, but the entire content is flipped relative to the default ltr layout)':

div {
  inset-inline-start: 50px;
  direction: rtl;
}

Try It Yourself

CSS Syntax

inset-inline-start: auto|length|initial|inherit;

Property Value

Value	Description
auto	Default Value. The default inline inset distance of the element.
length	Specifies a distance in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specifies a percentage distance relative to the size of the parent element on the corresponding axis.
initial	Sets this property to its default value. See: initial.
inherit	Inherits this property from its parent element. See: inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.insetInlineStart="30%"