inset-inline-start
Установите расстояние до родительского элемента от начала позиционированного элемента <div> элемент в линейном направлении:
div {
inset-inline-start: 50px;
}
Попробуйте сами »
Определение inset-inline-start
CSS свойство inset-inline-start
устанавливает расстояние между началом элемента и родительским элементом во внутреннем направлении.
Примечание: Чтобы это свойство вступило в силу, необходимо указать свойство position
.
CSS свойство
inset-inline
и
inset-block
очень похожи на CSS свойства
top
,
bottom
,
left
и
right
, но свойство
inset-block
и
inset-inline
зависят от направления блока и линии.
Примечание: Связанное CSS свойство writing-mode
и направление
определяет внутреннее направление. Это влияет на то, где начало элемента находится в линейном направлении, и на результат свойства inset-inline-start
. Для страниц на английском языке строковое направление — слева направо, а направление блока — вниз.
Значение по умолчанию: | auto |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Прочитать о animatable Попробуй |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.insetInlineStart="30%" Попробуй |
Поддержка inset-inline-start
Номера свойств CSS в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
inset-inline-start | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 |
Синтаксис inset-inline-start
inset-inline-start: auto|value|initial|inherit;
Значения inset-inline-start
Значения | Описание | Демонстрация |
---|---|---|
auto | По умолчанию. Расстояние вставки элемента по умолчанию. | Демо ❯ |
length | Указывает расстояние в px, pt, cm и т.д. Допускаются отрицательные значения. Читать о единицах длины | Демо ❯ |
% | Указывает расстояние в процентах относительно размера родительского элемента на соответствующей оси. | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры inset-inline-start
При значении свойства writing-mode
элемента <div> для элемента установлено значение vertical-rl, направление строки — вниз. В результате начало элемента перемещается с левой стороны вверх:
div {
inset-inline-start: 50px;
writing-mode: vertical-rl;
}
Попробуйте сами »
При значении свойства direction
элемента <div> для элемента установлено значение rtl, направление строки — справа налево. В результате начало элемента перемещается слева направо:
div {
inset-inline-start: 50px;
direction: rtl;
}
Попробуйте сами »
Страницы по теме inset-inline-start
CSS Учебник: CSS Позиции
CSS position свойство: CSS Позиция
CSS direction свойство: CSS Направление
CSS writing-mode свойство: CSS Режим записи