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