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