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

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

inset-inline Установить расстояние между элементом и его родителем в направлении строки.

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

inset-inline Эта属性 является сокращенной формой следующих свойств:

inset-inline Значение属性的 можно установить несколькими способами:

Если у属性的 inset-inline два значения:

inset-inline: 10px 50px;
  • Расстояние до начала составляет 10px
  • Расстояние до конца составляет 50px

Если у атрибута inset-inline есть значение:

inset-inline: 10px;
  • расстояние от начала и конца 10px

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

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

Пример

Пример 1

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

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

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

Пример 2

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

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

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

Пример 3

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

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

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

CSS синтаксис

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

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

Значение Описание
auto Значение по умолчанию. Значение по умолчанию для inset-inline расстояния элемента.
length Указать расстояние в px, pt, cm и других единицах. Допускаются отрицательные значения. См.:Единицы CSS.
% Указать процентное расстояние от размера родительского элемента по соответствующей оси.
initial Установить этот атрибут в его значение по умолчанию. См. initial.
inherit Ингерит этот атрибут от родительского элемента. См. inherit.

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

Значение по умолчанию: auto
Ингерит: Нет
Создание анимации: Поддерживается. См.:Атрибуты анимации.
Версия: CSS3
JavaScript синтаксис: object.style.insetInline="100px 50px"

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

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

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Соответствующие страницы

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

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

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

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