<length>

Тип даних CSS <length> (довжина) представляє значення відстані. Довжини можуть використовуватися в багатьох властивостях CSS, як то width, height, margin, padding, border-width, font-size і text-shadow.

[!NOTE] Попри те, що значення <percentage> можуть використовуватися в частині тих властивостей, що приймають значення <length>, самі відсоткові значення не є значеннями <length>. Дивіться <length-percentage>.

Синтаксис

Тип даних <length> складається з <number>, після чого стоїть одна з одиниць вимірювання, перелічених нижче. Як з усіма розмірами CSS, немає пробілів між числом та літералом одиниці вимірювання. Задання одиниці довжини – необов'язкове, якщо число – 0.

[!NOTE] Частина властивостей дозволяє від'ємні значення <length>, частина – ні.

Задане значення довжини (задана довжина) представлено своїми кількістю та одиницею вимірювання. Обчислене значення довжини (обчислена довжина) – це задана довжина, приведена до абсолютного значення, і її одиниця вимірювання не розрізняється.

Одиниці вимірювання <length> можуть бути відносними й абсолютними. Відносні довжини представляють вимірювання відносно якоїсь іншої відстані. Залежно від одиниці, ця відстань може бути розміром певного символу, висотою рядка символів чи розміром області перегляду. Таблицям стилів, що використовують відносні одиниці вимірювання довжини, легше масштабуватися між різними середовищами.

[!NOTE] Дочірні елементи не успадковують відносні значення у такому вигляді, в якому вони задані на їх предках; вони успадковують обчислені значення.

Відносні одиниці вимірювання довжини

Відносні одиниці вимірювання довжини в CSS засновані на розмірах шрифту, контейнера або області перегляду.

Відносні одиниці вимірювання довжини, засновані на шрифті

Шрифтові довжини визначають значення <length> відносно розміру певного символу чи атрибуту конкретного шрифту, застосованого до елемента чи його предка.

[!NOTE] Ці одиниці, особливо em і відносна щодо кореня rem, нерідко використовуються для створення масштабованих макетів, котрі зберігають вертикальний ритм сторінки навіть тоді, коли користувач змінює розмір шрифту.

cap

Представляє "cap height" – "висоту заголовної літери" (номінальну висоту великих літер) шрифту елемента.

ch

Представляє ширину, а точніше – попередній розмір гліфа 0 (нуля, символу Unicode U+0030) у шрифті елемента. У випадках, коли визначити розмір гліфа 0 неможливо чи непрактично, він повинен вважатися 0.5em завширшки та 1em заввишки.

em

Представляє обчислене значення font-size елемента. Коли використовується у самій властивості font-size, то представляє успадковане значення font-size елемента.

ex

Представляє x-висоту шрифту елемента. У шрифтах з літерою x це зазвичай висота малих літер шрифту; у багатьох шрифтах 1ex ≈ 0.5em.

ic

Дорівнює застосованому попередньому розмірові гліфа "水" (ідеограма води в CJK, U+6C34), знайденого в шрифті, що застосовується для відображення.

lh

Дорівнює обчисленому значенню властивості line-height елемента, на якому застосована, перетвореному на абсолютну довжину. Ця одиниця вимірювання дає змогу виконувати обчислення довжини на основі теоретичного розміру ідеального порожнього рядка. Проте розмір фактичних рядкових блоків може відрізнятися в залежності від їх вмісту.

Відносні одиниці вимірювання довжини, засновані на шрифті кореневого елемента

Одиниці вимірювання довжини, відносні щодо величини шрифту кореневого елемента, визначають значення <length> відносно розміру певного символу чи атрибуту шрифту для кореневого елемента.

rcap

Дорівнює "висоті заголовної літери" (номінальній висоті великих літер) шрифту кореневого елемента.

rch

Дорівнює ширині, а точніше – попередній оцінці розміру гліфа 0 (нуля, символу Unicode U+0030) у шрифті кореневого елемента.

rem

Представляє font-size кореневого елемента (зазвичай елемента <html>). Коли використовується у font-size кореневого елемента, то представляє початкове значення. Загальноприйняте в браузерах усталене значення – 16px, але користувацькі налаштування можуть його змінити.

rex

Представляє висоту по осі X шрифту кореневого елемента.

ric

Дорівнює значенню одиниці вимірювання ic шрифту кореневого елемента.

rlh

Дорівнює значенню одиниці вимірювання lh шрифту кореневого елемента. Ця одиниця дає змогу виконувати обчислення довжини на основі теоретичного розміру ідеального порожнього рядка. Проте розмір фактичних рядкових блоків може відрізнятися в залежності від їх вмісту.

Відносні одиниці вимірювання довжини, засновані на області перегляду

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

Малий

Коли при реагуванні на динамічне розширення елементів браузерного інтерфейсу використовується найменша можлива область перегляду, слід використовувати малий розмір області. Малий розмір області перегляду дає змогу заповнити усю область перегляду, коли браузерний інтерфейс розширюється. Вибір такого розміру також може залишити пустий простір, коли браузерний інтерфейс звужується.

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

Малий розмір області перегляду представлений префіксом sv і приводить до одиниць вимірювання, відсоткових щодо області перегляду, sv*. Розміри одиниць вимірювання у відсотках від малої області – фіксовані, якщо область перегляду не змінює своїх розмірів.

Великий

Коли при реагуванні на динамічне звуження елементів браузерного інтерфейсу потрібно отримати найбільшу можливу область перегляду, слід використовувати великий розмір області. Великий розмір області перегляду дає змогу заповнити усю область перегляду, коли браузерний інтерфейс звужується. Слід мати на увазі, що частина вмісту може бути прихована, коли браузерний інтерфейс розшириться.

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

Великий розмір області перегляду представлений префіксом lv і приводить до одиниць вимірювання, відсоткових щодо області перегляду, lv*. Розміри одиниць вимірювання у відсотках від великої області – фіксовані, якщо область перегляду не змінює своїх розмірів.

Динамічний

Коли область перегляду повинна автоматично отримувати розмір у відповідь на динамічне розширення чи звуження інтерфейсу браузера, можна використати динамічний розмір області. Динамічний розмір області дає вмістові змогу точно вписатися в область перегляду, незалежно від присутності динамічних елементів інтерфейсу браузера.

Динамічна одиниця області перегляду представлена префіксом dv і приводить до відсоткових одиниць вимірювання dv*. Розміри одиниць вимірювання у відсотках від динамічної області – нестабільні, навіть якщо сама область перегляду не змінюється.

[!NOTE] Хоч динамічний розмір області перегляду може дати більше контролю і гнучкості, використання відсотків від динамічного розміру області перегляду може змусити вміст змінювати розмір, коли користувач прокручує сторінку. Це може призвести до деградації користувацького інтерфейсу та падіння швидкодії.

Усталений

Усталений розмір області перегляду – визначений браузером. Поведінка результівної одиниці вимірювання може наслідувати логіку роботи відсоткових одиниць малої області перегляду, великої області, проміжної між попередніми двома, або ж динамічного розміру.

[!NOTE] Наприклад, браузер може реалізувати усталену одиницю відсотків щодо області видимості для висоти (vh), рівносильну одиниці висоти щодо великої області перегляду (lvh). Якщо це так, то це може призвести до затуляння вмісту при повносторінковому перегляді, коли браузерний інтерфейс – розгорнутий.

Довжини у відсотках від області перегляду визначають значення <length> – відносні щодо розміру початкового контейнерного блоку, котрий своєю чергою заснований або на розмірі області видимості, або на розмірі області сторінки, тобто видимої частини документа. Коли висота чи ширина початкового контейнерного блока змінюється, елементи, що отримали розмір на їх основі, відповідно масштабуються. Є одиниці вимірювання довжини на основі області перегляду, що відповідають кожному з розмірів області перегляду, як описано нижче.

[!NOTE] Довжини від області перегляду вважаються недійсними у блоках оголошення @page.

vh

Представляє відсотки від висоти початкового контейнерного блока області перегляду. 1vh – це 1% від висоти області перегляду. Наприклад, якщо її висота – 300px, то значення властивості 70vh означатиме 210px.

Відповідні одиниці відсотків від області перегляду для малих, великих та динамічних розмірів області перегляду – svh, lvh і dvh. vh представляє одиницю, засновану на усталеному для браузера розмірі області перегляду.

vw

Представляє відсотки від ширини початкового контейнерного блока області перегляду. 1vw – це 1% від ширини області перегляду. Наприклад, якщо її ширина – 800px, то значення властивості 50vw означатиме 400px.

Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є svw, lvw і dvw. vw представляє одиницю, засновану на усталеному для браузера розмірі області перегляду.

vmax

Представляє більше серед vw і vh.

Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є svmax, lvmax і dvmax. vmax представляє одиницю, засновану на усталеному для браузера розмірі області перегляду.

vmin

Представляє менше серед vw і vh.

Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є svmax, lvmax і dvmax. vmax представляє одиницю, засновану на усталеному для браузера розмірі області перегляду.

vb

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

Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є svb, lvb і dvb відповідно. vb представляє одиницю, засновану на усталеному для браузера розмірі області перегляду.

vi

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

Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є svi, lvi та dvi відповідно. vi представляє одиницю, засновану на усталеному для браузера розмірі області перегляду.

Одиниці вимірювання довжини для контейнерних запитів

При застосуванні стилів до контейнера за допомогою контейнерних запитів можна використовувати окремі одиниці вимірювання довжини для контейнерних запитів. Ці одиниці задають довжину відносно розмірів контейнера запиту. Компоненти, що використовують одиниці вимірювання довжини, відносні щодо контейнера, є гнучкішими у використанні в різних контейнерах, адже не потребують заново обчислювати конкретні значення довжини. Докладніше про це – в Контейнерних запитах.

cqw

Представляє відсотки від ширини контейнера запиту. 1cqw – це 1% від ширини контейнера запиту. Наприклад, якщо ширина контейнера запиту – 800px, то значення властивості 50cqw означатиме 400px.

cqh

Представляє відсотки від висоти контейнера запиту. 1cqh – це 1% від висоти контейнера запиту. Наприклад, якщо висота контейнера запиту – 300px, то значення властивості 10cqh означатиме 30px.

cqi

Представляє відсотки рядкового розміру контейнера запиту. 1cqi – це 1% від рядкового розміру контейнера запиту. Наприклад, якщо рядковий розмір контейнера запиту – 800px, то значення властивості 50cqi означатиме 400px.

cqb

Представляє відсотки від блокового розміру контейнера запиту. 1cqb – це 1% від блокового розміру контейнера запиту. Наприклад, якщо блоковий розмір контейнера запиту – 300px, то значення властивості 10cqb означатиме 30px.

cqmin

Представляє відсотки від рядкового або блокового розміру контейнера запиту, залежно який розмір менше. 1cqmin – це 1% від рядкового або блокового розміру контейнера запиту, залежно який розмір менше. Наприклад, якщо рядковий розмір контейнера запиту – 800px, а блоковий – 300px, то значення властивості 50cqmin означатиме 150px.

cqmax

Представляє відсотки від рядкового або блокового розміру контейнера запиту, залежно який розмір більше. 1cqmax – це 1% від рядкового або блокового розміру контейнера запиту, залежно який розмір більше. Наприклад, якщо рядковий розмір контейнера запиту – 800px, а блоковий – 300px, то значення властивості 50cqmax означатиме 400px.

Абсолютні одиниці довжини

Абсолютні одиниці довжини представляють фізичну міру, коли фізичні властивості засобу виведення – відомі, як то при верстанні для друку. Це виконується шляхом прив'язування однієї з одиниць до фізичної одиниці, а потім визначення інших одиниць відносно неї. Прив'язування виконується по-різному для пристроїв з низькою роздільною здатністю, як то екранів, і пристроїв з високою, як то принтерів.

Для пристроїв з низьким DPI одиниця вимірювання px представляє фізичний референтний піксель; решта одиниць визначаються щодо неї. Таким чином, 1in визначається як 96px, що дорівнює 72pt. Наслідком такого визначення є те, що на таких пристроях міри, описані в дюймах (in), сантиметрах (cm) чи міліметрах (mm) не обов'язково збігаються з розмірами однойменної фізичної одиниці вимірювання.

Для пристроїв з високим DPI дюйми (in), сантиметри (cm) та міліметри (mm) – такі самі, як їх фізичні відповідники. Таким чином, одиниця вимірювання px визначається відносно них (1/96 від 1in).

[!NOTE] Чимало користувачів збільшує розмір шрифту свого користувацького агента, аби зробити текст розбірливішим. Абсолютні довжини можуть призвести до негараздів з доступністю, адже вони фіксовані й не масштабуються відповідно до користувацьких налаштувань. З цієї причини при заданні font-size слід віддавати перевагу відносним одиницям (як то em чи rem).

px

Один піксель. Для екранних пристроїв ця одиниця традиційно представляє один піксель пристрою (точку). Проте для принтерів та екранів високої роздільної здатності один піксель означає декілька пікселів пристрою. 1px = 1in / 96.

cm

Один сантиметр. 1cm = 96px / 2.54.

mm

Один міліметр. 1mm = 1cm / 10.

Q

Одна чверть міліметра. 1Q = 1cm / 40.

in

Один дюйм. 1in = 2.54cm = 96px.

pc

Одна пайка. 1pc = 12pt = 1in / 6.

pt

Один пункт. 1pt = 1in / 72.

Інтерполяція

При анімації значення типу даних <length> інтерполюються як дробові числа з рухомою комою. Інтерполяція відбувається на підрахованому значенні. Швидкість інтерполяції визначається функцією пом'якшення, пов'язаною з конкретною анімацією.

Приклади

Порівняння різних одиниць довжини

Наступний приклад надає поле введення, у котре можна ввести значення <length> (наприклад, 300px, 50%, 30vw), аби задати ширину результівної риски, що з'явиться під полем, щойно буде натиснуто клавішу Enter або Return.

Це дасть змогу порівняти й помітити різницю між різними одиницями довжини.

HTML

<div class="outer">
  <div class="input-container">
    <label for="length">Введіть ширину:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>

CSS

html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
}

.result {
  height: 20px;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

JavaScript

const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  const code = document.createElement("code");
  code.textContent = `ширина: ${inputElem.value}`;
  result.appendChild(code);
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});

Результат

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

Специфікація
CSS Values and Units Module Level 5 (CSS Values 5)
# lengths

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
<length>
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
 Internet Explorer Full support 3
 Opera Full support 3.5
 Safari Full support 1
 WebView Android Full support 37
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 10.1
 Safari on iOS Full support 1
 Samsung Internet Full support 1.0
Q unit
Chrome Full support 63
 Edge Full support 79
 Firefox Full support 49
 Internet Explorer No support Ні
 Opera Full support 50
 Safari No support Ні
 WebView Android Full support 63
 Chrome Android Full support 63
 Firefox for Android Full support 49
 Opera Android Full support 46
 Safari on iOS No support Ні
 Samsung Internet Full support 8.0
cap unit
Експериментальне
Chrome No support Ні
 Edge No support Ні
 Firefox Full support 97
 Internet Explorer No support Ні
 Opera No support Ні
 Safari No support Ні
 WebView Android No support Ні
 Chrome Android No support Ні
 Firefox for Android Full support 97
 Opera Android No support Ні
 Safari on iOS No support Ні
 Samsung Internet No support Ні
ch unit
Chrome Full support 27
 Edge Full support 12
 Firefox Full support 1
footnote
Internet Explorer Full support 9
 Opera Full support 20
 Safari Full support 7
 WebView Android Full support 37
 Chrome Android Full support 27
 Firefox for Android Full support 4
 Opera Android Full support 14
 Safari on iOS Full support 7
 Samsung Internet Full support 1.5
ex unit
Chrome Full support 1
 Edge Full support 12
 Firefox Full support 1
 Internet Explorer Full support 4
 Opera Full support 3.5
 Safari Full support 1
 WebView Android Full support 1
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 10.1
 Safari on iOS Full support 1
 Samsung Internet Full support 1.0
ic unit
Chrome No support Ні
footnote
Edge No support Ні
 Firefox Full support 97
 Internet Explorer No support Ні
 Opera No support Ні
 Safari Full support 15.4
 WebView Android No support Ні
 Chrome Android No support Ні
footnote
Firefox for Android Full support 97
 Opera Android No support Ні
 Safari on iOS Full support 15.4
 Samsung Internet No support Ні
lh unit
Chrome No support Ні
footnote
Edge No support Ні
 Firefox No support Ні
footnote
Internet Explorer No support Ні
 Opera No support Ні
 Safari No support Ні
 WebView Android No support Ні
 Chrome Android No support Ні
 Firefox for Android No support Ні
 Opera Android No support Ні
 Safari on iOS No support Ні
 Samsung Internet No support Ні
rem unit
Chrome Full support 4
 Edge Full support 12
 Firefox Full support 3.6
 Internet Explorer Full support 9
 Opera Full support 11.6
 Safari Full support 5
 WebView Android Full support 2
 Chrome Android Full support 18
 Firefox for Android Full support 4
 Opera Android Full support 12
 Safari on iOS Full support 4
 Samsung Internet Full support 1.0
rlh unit
Chrome No support Ні
footnote
Edge No support Ні
 Firefox No support Ні
footnote
Internet Explorer No support Ні
 Opera No support Ні
 Safari No support Ні
 WebView Android No support Ні
 Chrome Android No support Ні
 Firefox for Android No support Ні
 Opera Android No support Ні
 Safari on iOS No support Ні
 Samsung Internet No support Ні
vb unit
Chrome No support Ні
 Edge No support Ні
 Firefox No support Ні
footnote
Internet Explorer No support Ні
 Opera No support Ні
 Safari Full support 15.4
 WebView Android No support Ні
 Chrome Android No support Ні
 Firefox for Android No support Ні
 Opera Android No support Ні
 Safari on iOS Full support 15.4
 Samsung Internet No support Ні
vh unit
Chrome Full support 20
 Edge Full support 12
 Firefox Full support 19
footnote
Internet Explorer Full support 9
 Opera Full support 20
 Safari Full support 6
 WebView Android Full support 37
 Chrome Android Full support 25
 Firefox for Android Full support 19
footnote
Opera Android Full support 14
 Safari on iOS Full support 6
 Samsung Internet Full support 1.5
vi unit
Chrome No support Ні
 Edge No support Ні
 Firefox No support Ні
footnote
Internet Explorer No support Ні
 Opera No support Ні
 Safari Full support 15.4
 WebView Android No support Ні
 Chrome Android No support Ні
 Firefox for Android No support Ні
 Opera Android No support Ні
 Safari on iOS Full support 15.4
 Samsung Internet No support Ні
vmax unit
Chrome Full support 26
 Edge Full support 16
 Firefox Full support 19
footnote
Internet Explorer No support Ні
 Opera Full support 15
 Safari Full support 7
 WebView Android Full support 1.5
 Chrome Android Full support 26
 Firefox for Android Full support 19
footnote
Opera Android Full support 14
 Safari on iOS Full support 7
 Samsung Internet Full support 1.5
vmin unit
Chrome Full support 26
 Edge Full support 12
 Firefox Full support 19
footnote
Internet Explorer Full support 10
 Opera Full support 15
 Safari Full support 7
 WebView Android Full support 37
 Chrome Android Full support 26
 Firefox for Android Full support 19
footnote
Opera Android Full support 14
 Safari on iOS Full support 7
 Samsung Internet Full support 1.5
vw unit
Chrome Full support 20
 Edge Full support 12
 Firefox Full support 19
footnote
Internet Explorer Full support 9
 Opera Full support 20
 Safari Full support 6
 WebView Android Full support 37
 Chrome Android Full support 25
 Firefox for Android Full support 19
footnote
Opera Android Full support 14
 Safari on iOS Full support 6
 Samsung Internet Full support 1.5

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.