inline-size

Пример

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

div {
inline-size: 200px;
}

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

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

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

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

Показ демо ❯

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

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

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

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

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

inline-size: auto|value|initial|inherit;

Значения inline-size

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

Примеры inline-size

Пример

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

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

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