Proprietà CSS inset-inline-start

Pagina precedente inset-inline-end
Pagina successiva isolation

Definition and usage

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

Note:To make this attribute take effect, you must specify position attributes.

CSS inset-inline and inset-block attributes are similar to the CSS top,bottom,left and right attributes are very similar, but inset-block and inset-inline The attribute 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 attribute. For English pages, the direction of the line 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 attribute 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 attribute value is set to rtl, the direction of the line is from right to left. There is a minor error in the description here, 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, it is just that 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;

Attribute value

Value	Description
auto	Default value. The default inline inset distance of the element.
length	Specify the distance with units such as px, pt, cm, etc. Negative values are allowed. See:Unità CSS.
%	Specify the percentage distance relative to the parent element's size on the corresponding axis.
initial	Set this property to its default value. See initial.
inherit	Inherit 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%"