block-size

Пример

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

div {
block-size: 200px;
}

Определение block-size

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

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

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

Показ демо ❯

Значение по умолчанию:	auto
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS3
JavaScript синтаксис:	object.style.blockSize="100px" Попробуй

Поддержка block-size

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

Свойство
block-size	57.0	79.0	41.0	12.1	44.0

Синтаксис block-size

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

Значения block-size

Значение	Описание	Демонстрация
auto	По умолчанию. Значение элемента block-size по умолчанию.	Демо ❯
length	Определяет размер блока в px, pt, cm, и т.д. Читайте о единицах измерения длины	Демо ❯
%	Задает размер блока в процентах относительно размера родительского элемента на соответствующей оси.	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры block-size

Пример

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

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

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