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