CSS inset-inline-end property

Definition and Usage

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

Note:To make this property effective, you must specify position properties.

CSS inset-inline and inset-block properties are related to the CSS top,bottom,left and right The property is 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 position of the end of the element in the line direction and inset-inline-end 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 end of the positioned <div> element and the parent element in the line direction:

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

Try It Yourself

Example 2

When the <div> element's writing-mode When the property value is set to vertical-rl, the direction of the line is downward. The result is that the end of the element moves from the right to the bottom:

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

Try It Yourself

Example 3

When the <div> element's direction When the property value is set to rtl, the direction of the line is from right to left. The result is that the end of the element moves from the right to the left:

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

Try It Yourself

CSS Syntax

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

Property 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 attribute

Reference:CSS direction Attribute

Reference:CSS writing-mode property