Атрибут CSS inset-inline-start

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

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

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

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

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

Пример

Пример 1

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

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

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

Пример 2

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

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

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

Пример 3

Когда у элемента '<div>' Когда значение атрибута 'direction' установлено в 'rtl', направление строки слева направо. В этом описании есть небольшая ошибка, она должна быть: 'Результатом является то, что начальная точка элемента все еще находится справа (поскольку для 'rtl', начальная точка本身就是 справа, просто по сравнению с обычной компоновкой 'ltr', все содержимое переворачивается)

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

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

Синтаксис CSS

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

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

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

Поддержка браузерами

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

Связанные страницы

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

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

См. также:Атрибут CSS direction

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