Свойство block-size в CSS

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

block-size Свойство определяет размер элемента в направлении блока.

Примечание:связанные CSS свойства writing-mode Определяет направление блока, что влияет на block-size Для английских страниц направление блока направлено вниз, а направление инлайна справа налево.

CSS. block-size и inline-size свойства соответствуют результату CSS. width и height свойства очень похожи, но block-size и inline-size Свойство зависит от направления блока и направления инлайна.

Пример

Пример 1

Установить размер элемента <div> в направлении блока:

div {
  block-size: 200px;
}

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

Пример 2

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

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

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

Синтаксис CSS

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

Значение свойства

Значение Описание
auto По умолчанию. Значение по умолчанию block-size для элементов.
length Указать block-size в px, pt, cm и других единицах измерения. См. также:Единицы CSS.
% Указать block-size в процентах по отношению к размеру родительского элемента в соответствующем направлении.
initial Установить это свойство в его значение по умолчанию. См. initial.
inherit Ингерит из родительского элемента. См. inherit.

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

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

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

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

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

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

CSS курс:Высота и ширина в CSS

CSS курс:Модель фрейма в CSS

CSS справочник:свойство height

CSS справочник:свойство width

CSS справочник:writing-mode свойство