inline-size: размер блока вдоль строки
Inline-size задаёт размер по строчной оси режима письма. При горизонтальном письме это обычно ширина, а при вертикальном — соответствующее вертикальное измерение.
Назначение
Inline-size задаёт размер по строчной оси режима письма. При горизонтальном письме это обычно ширина, а при вертикальном — соответствующее вертикальное измерение.
Как это работает
Логическое свойство позволяет описывать компонент через направление текста. Размер зависит от box-sizing, как и физическая ширина. Для адаптивного ограничения можно использовать max-inline-size, сохранив возможность сжатия.
Пример
<style>.inline-demo{box-sizing:border-box;inline-size:20rem;max-inline-size:100%;padding:1rem;border:2px solid #3f7858;overflow-wrap:anywhere}</style>
<div class="inline-demo">Логический размер подходит компонентам, которые должны учитывать направление письма.</div>Что должно получиться
В обычном горизонтальном документе блок стремится к ширине 20rem, но не выходит за доступную ширину родителя. Внутренний отступ и рамка учитываются благодаря border-box.
Граница применения и частая ошибка
Inline-size не делает элемент строчным: режим display задаётся отдельно. Не назначайте одновременно width и inline-size без понимания каскада и их сопоставления. Непереносимое содержимое всё ещё может переполнить блок.
Самостоятельная проверка
Сравните размер в горизонтальном и вертикальном writing-mode. Затем увеличьте шрифт и добавьте длинное слово. Посмотрите вычисленные размеры и объясните, какая физическая ось соответствует inline в каждом случае.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.