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