HTML теги
CSS властивості
ГлавнаяВластивості CSSАтрибут inline-size в CSS

Атрибут inline-size в CSS

198

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

На рис. 1 показано варіанти inline-size при різних значеннях writing-mode

writing-mode: horizontal-tb

а. writing-mode: horizontal-tb, мала вісь розташовується горизонтально

writing-mode : vertical-rl

б. writing-mode: vertical-lr, рядкова вісь розташовується вертикально

writing-mode : vertical-lr

ст. writing-mode: vertical-rl, рядкова вісь розташовується вертикально. 1. Розмір елемента по рядковій осі

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

Значення за замовчуванням auto
Успадковується Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис 

<code>inline-size: <розмір> | <відсотки> | auto

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

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

auto
Встановлює розмір, виходячи з типу та вмісту елемента.

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок вже давно закінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
-tablet is-6-desktop playground-values"> 
div { inline-size: <span class="playground-active">{{ playgroundValue }}%</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="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; /* Параметри тексту */
background: #dad7c5; /* Колір тла */
color: #c33; /* Червоний текст */
padding: 10px; /* Поля навколо тексту */
inline-size: 150px; /* Розмір блоку */
writing-mode: vertical-lr; /* Вертикальне написання */
text-orientation: upright; /* Повертаємо літери */
}
</style>
</head>
<body> <div>Війна — це шлях обману</div>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Розмір блоку при вертикальній орієнтації

Мал. 1. Розмір блоку при вертикальній орієнтації

Об'єктна модель

Об'єкт.style.inlineSize

Специфікація

Специфікація Статус
CSS Logical Properties and Values Level 1 Робочий проект

Специфікація

Кожен специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C та рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

79 57 44 12.1 41
80 68 46 12.2

Браузери

В таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі знання чення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.

© Htmlbook - довідник HTML і CSS, 2025. Працює на MaxSite CMS