inline-size

Обновлено: 29.03.2023

inline-size

Определяет размер элемента по строчной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет горизонтальной и inline-size устанавливает ширину элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет вертикальной и inline-size устанавливает высоту элемента.

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис 

inline-size: <размер> | <проценты> | auto

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи размер элемента вычисляется в зависимости от размера родительского элемента.

auto Устанавливает размер, исходя из типа и содержимого элемента.

Пример

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>inline-size</title>
   <link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
   <style>
    div {
     font: 1.2em/1.6 'Neucha', cursive; /* Text options */
     background: #dad7c5; /* Background color */
     color: #c33; /* Red text */
     padding: 10px /* Margin around text */
     inline-size: 150px; /* Block size */
     writing-mode: vertical-lr; /* Vertical writing */
     text-orientation: upright; /* Rotate letters */
    }
   </style>
  </head>
  <body>
   <div>War is a path of deceit</div>
  </body>
</html>

Объектная модель

Объект.style.inlineSize

Браузеры

inline-size

Посмотреть совместимость на Can I use?

inline-size