Свойство CSS inset-inline-end

Определение и использование

inset-inline-end атрибут, который устанавливает расстояние между концом элемента в направлении строки и родительским элементом.

Примечание:Чтобы сделать этот атрибут действительным, необходимо указать position атрибутам.

CSS- inset-inline и inset-block атрибуты соответствуют CSS- top,bottom,left и right Атрибут очень похож, но inset-block и inset-inline Атрибут зависит от направления блока и строки.

Примечание:связанные CSS-атрибуты writing-mode и direction Определяет направление строки. Это влияет на положение конца элемента в направлении строки и inset-inline-end Результат свойств. Для английских страниц направление строки слева направо, направление блока снизу вверх.

Пример

Пример 1

Установить расстояние между концом расположенного элемента <div> и родительским элементом в направлении строки:

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

Попробуйте сами

Пример 2

Когда у элемента <div> writing-mode Когда значение атрибута установлено в vertical-rl, направление строки снизу вверх. Результатом является перемещение конца элемента из правого края в нижний край:

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

Попробуйте сами

Пример 3

Когда у элемента <div> direction Когда значение атрибута установлено в rtl, направление строки с правой стороны на левую. Результатом является перемещение конца элемента из правого края в левый:

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

Попробуйте сами

Синтаксис CSS

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

Значение атрибута

Технические детали

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

См. также:

Урок:Позиционирование CSS

См. также:Свойство CSS position

См. также:Свойство direction в CSS

См. также:Свойство writing-mode в CSS