CSS inset-inline property

Definition and Usage

inset-inline The property sets the distance between the element and its parent element in the line direction.

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

inset-inline This property is a shorthand for the following properties:

• inset-inline-start
• inset-inline-end

inset-inline The value of the property can be set in different ways:

If the 'inset-inline' property has two values:

inset-inline: 10px 50px;

• The distance to the start point is 10px
• The distance to the end point is 50px

If the inset-inline attribute has a value:

inset-inline: 10px;

• The distances from the starting end and ending end are both 10px

CSS's inset-inline and inset-block properties are similar to CSS's top,bottom,left and right The attribute is 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 and ending positions of the line, as well as inset-inline 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

Sets the distance between the positioned <div> element and its parent element in the line direction:

div {
  inset-inline: 10px 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, and the ending end moves from the right to the bottom:

div {
  inset-inline: 15px 30px;
  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. The result is that the starting end of the element moves from the left to the right, and the ending end moves from the right to the left:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Try it yourself

CSS syntax

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

Attribute value

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this property.

Related pages

Tutorial:CSS Positioning

Reference:CSS position property

Reference:CSS direction property

Reference:CSS writing-mode property