Атрибут CSS inset-block

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

inset-block Элемент настройки свойств отстоял в направлении блока от родительского элемента.

Обратите внимание:Для того чтобы это свойство работало, необходимо определить position свойства.

inset-block Свойство является сокращением для следующих свойств:

inset-block значение свойства можно установить несколькими способами:

Если inset-block свойство имеет два значения:

inset-block: 10px 50px;
  • начальное расстояние составляет 10px
  • конечное расстояние составляет 50px

Если inset-block свойство имеет один значений:

inset-block: 10px;
  • начальные и конечные расстояния составляют 10px

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

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

Пример

Пример 1

Установите расстояние между расположенным div и родительским элементом в направлении блока:

div {
  inset-block: 10px 50px;
}

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

Пример 2

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

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

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

Синтаксис CSS

inset-block: auto|length|initial|inherit;

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

Значение Описание
auto Значение по умолчанию. Значение по умолчанию для inset-block элемента.
length Определите расстояние в px, pt, cm и других единицах. Допускаются отрицательные значения. См.:Единицы CSS.
% Определите процентное расстояние относительно размера родительского элемента по соответствующей оси.
initial Установите эту�性 в значение по умолчанию. См.: initial.
inherit Эта属性 inherits от родительского элемента. См.: inherit.

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

Значение по умолчанию: auto
Ингеритация: Нет
Создание анимации: Поддерживается. См.:Атрибуты, связанные с анимацией.
Версия: CSS3
Синтаксис JavaScript: object.style.insetBlock="100px 50px"

Поддержка браузеров

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

Кروм Эдж Фаерфокс Сафари Опера
87.0 87.0 63.0 14.1 73.0

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

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

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

См. также:Атрибут CSS inset-block-end

См. также:Атрибут CSS inset-block-start

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