Тип CSS `<length>`

<length> — это CSS тип данных, представляющий значение расстояния. Длины можно использовать во множестве свойств CSS, таких как width, height, margin, padding, border-width, font-size и text-shadow.

Синтаксис

Тип данных <length> состоит из <number>, за которым следует одна из перечисленных ниже единиц измерения. Как и для всех размерностей CSS, между числом и обозначением единицы измерения нет пробела. Указывать единицу длины необязательно, если число равно 0.

Заданные и вычисленные значения

Заданное значение длины (заданная длина) представлено её величиной и единицей измерения. Вычисленное значение длины (вычисленная длина) — это заданная длина, преобразованная в абсолютную; её единица измерения не учитывается.

Для некоторых свойств, таких как border-width, outline-width, column-rule-width и outline-offset, вычисленные значения <length> округляются до целого числа пикселей устройства, чтобы обеспечить приемлемое отображение:

• Ненулевое значение меньше одного пикселя устройства округляется вверх.
• Значение больше одного пикселя устройства округляется вниз до ближайшего целого пикселя устройства.

Например, на экране с devicePixelRatio равным 3 значение border-width: 1.5px вычисляется примерно как 1.33px (округляется вниз с 4,5 до 4 пикселей устройства), а значение outline-width: 0.2px — примерно как 0.33px (округляется вверх с 0,6 до 1 пикселя устройства).

Относительные и абсолютные длины

Единицы <length> могут быть относительными или абсолютными. Относительные длины представляют собой измерение относительно некоторого другого расстояния. В зависимости от единицы измерения это расстояние может соответствовать размеру определённого символа, высоте строки или размеру области просмотра. Таблицы стилей, в которых используются относительные единицы длины, легче адаптировать для разных сред вывода.

Относительные единицы длины

Относительные единицы длины CSS основаны на размерах шрифта, контейнера или области просмотра.

Относительные единицы длины, основанные на шрифте

Единицы длины шрифта задают значение <length> относительно размера определённого символа или атрибута шрифта, действующего для элемента или его родителя.

cap

Равно «высоте прописных» (номинальной высоте заглавных букв) шрифта элемента font.

ch

Представляет ширину или, точнее, ширину продвижения глифа 0 (ноль, символ Юникода U+0030) в font элемента. Если измерить ширину глифа 0 невозможно или нецелесообразно, следует считать, что его ширина равна 0.5em, а высота — 1em.

em

Представляет вычисленный font-size элемента. Если единица используется непосредственно в свойстве font-size, она представляет унаследованный размер шрифта элемента.

ex

Равна высоте строчных шрифта элемента font. В шрифтах с буквой x это, как правило, высота строчных букв; 1ex ≈ 0.5em во многих шрифтах.

ic

Представляет используемую ширину продвижения глифа «水» (идеограмма CJK «вода», U+6C34) из шрифта, используемого для его отображения.

lh

Равно вычисленному значению свойства line-height элемента, к которому оно применяется, преобразованному в абсолютную длину. Эта единица позволяет рассчитывать длину на основе теоретического размера идеальной пустой строки. Однако фактический размер строковых блоков может отличаться в зависимости от их содержимого.

Относительные единицы длины, основанные на шрифте корневого элемента

Относительные единицы длины, основанные на шрифте корневого элемента, задают значение <length> относительно размера определённого символа или атрибута шрифта элемента root:

rcap

Равно «высоте прописных» (номинальной высоте заглавных букв) шрифта элемента root font.

rch

Равно ширине или ширине продвижения глифа 0 (ноль, символ Юникода U+0030) в шрифте элемента root font.

rem

Представляет font-size корневого элемента (обычно <html>). При использовании в свойстве font-size корневого элемента представляет его начальное значение. По умолчанию браузеры часто используют 16px, но пользовательские настройки могут изменить это значение.

rex

Равна высоте строчных шрифта элемента root font.

ric

Равно значению единицы ic для шрифта элемента root.

rlh

Равно значению единицы lh для шрифта элемента root. Эта единица позволяет рассчитывать длину на основе теоретического размера идеальной пустой строки. Однако фактический размер строковых блоков может отличаться в зависимости от их содержимого.

Относительные единицы длины, основанные на области просмотра

Единицы длины в процентах от области просмотра основаны на четырёх её размерах: малом, большом, динамическом и стандартном. Возможность учитывать разные размеры области просмотра появилась в ответ на динамическое раскрытие и сворачивание интерфейсов браузера, которые скрывают или показывают расположенное под ними содержимое.

Единицы малого размера области просмотра

Если требуется учитывать минимальный размер области просмотра при динамическом раскрытии интерфейсов браузера, следует использовать малый размер области просмотра. Он позволяет содержимому полностью заполнять область просмотра, когда интерфейсы браузера раскрыты. Однако при их сворачивании могут появиться пустые области.

Например, элемент, размер которого задан в единицах, основанных на малом размере области просмотра, будет идеально заполнять экран, и его содержимое не будет перекрыто, когда показаны все динамические интерфейсы браузера. Однако при скрытии этих интерфейсов вокруг элемента может появиться дополнительное пространство. Поэтому в целом единицы, основанные на малом размере области просмотра, считаются более «безопасными», но после начала взаимодействия пользователя со страницей они могут привести к менее привлекательному макету.

Малый размер области просмотра обозначается префиксом sv и задаёт единицы длины в процентах от области просмотра sv*. Размеры этих единиц фиксированы и, следовательно, стабильны, пока не изменится сама область просмотра.

Единицы большого размера области просмотра

Если требуется учитывать максимальный размер области просмотра при динамическом сворачивании интерфейсов браузера, следует использовать большой размер области просмотра. Он позволяет содержимому полностью заполнять область просмотра, когда интерфейсы браузера свёрнуты. Следует учитывать, что при раскрытии интерфейсов часть содержимого может быть скрыта.

Например, на мобильных телефонах, где площадь экрана ограничена, браузеры часто скрывают часть или всю строку заголовка и адресную строку после начала прокрутки страницы. Если размер элемента задан в единицах, основанных на большом размере области просмотра, его содержимое заполнит всю видимую страницу, когда эти интерфейсы браузера скрыты. Однако при отображении сворачиваемых интерфейсов они могут скрыть содержимое, размер или положение которого заданы с помощью единиц в процентах от большой области просмотра.

Единицы большого размера области просмотра обозначаются префиксом lv и задают единицы в процентах от области просмотра lv*. Их размеры фиксированы и, следовательно, стабильны, пока не изменится сама область просмотра.

Единицы динамического размера области просмотра

Если требуется автоматически изменять размер области просмотра в ответ на динамическое раскрытие или сворачивание интерфейсов браузера, можно использовать динамический размер области просмотра. Он позволяет содержимому точно соответствовать области просмотра независимо от наличия динамических интерфейсов браузера.

Единицы динамического размера области просмотра обозначаются префиксом dv и задают единицы в процентах от области просмотра dv*. Их размеры нестабильны, даже если сама область просмотра не меняется.

Примечание: Динамический размер области просмотра даёт больше контроля и гибкости, однако использование единиц в процентах от динамического размера области просмотра может привести к изменению размера содержимого во время прокрутки страницы. Это может ухудшить интерфейс пользователя и снизить производительность.

Стандартные единицы области просмотра

Стандартный размер области просмотра определяется браузером. Соответствующая ему единица в процентах от области просмотра может вести себя так же, как единица, основанная на малом или большом размере области просмотра, на промежуточном размере между ними или на динамическом размере.

Примечание: Например, браузер может реализовать стандартную единицу в процентах от высоты области просмотра (vh), эквивалентную единице высоты в процентах от большой области просмотра (lvh). В этом случае при раскрытом интерфейсе браузера содержимое может быть скрыто в полноэкранном режиме. Сейчас все стандартные единицы области просмотра (vh, vw и т. д.) эквивалентны соответствующим единицам большой области просмотра (lvh, lvw и т. д.).

Длины в процентах от области просмотра задают значения <length> в процентах относительно размера начального блока-контейнера, который, в свою очередь, зависит от размера области просмотра или области страницы, то есть видимой части документа. При изменении высоты или ширины начального блока-контейнера элементы, размер которых от него зависит, масштабируются соответствующим образом. Для каждого из размеров области просмотра существует соответствующий вариант единицы длины в процентах, как описано ниже.

vh

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

Соответствующие единицы в процентах от малого, большого и динамического размеров области просмотра — svh, lvh и dvh. vh эквивалентна lvh — единице длины в процентах от области просмотра, основанной на большом размере.

vw

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

Соответствующие единицы в процентах от малого, большого и динамического размеров области просмотра — svw, lvw и dvw. vw эквивалентна lvw — единице длины в процентах от области просмотра, основанной на большом размере.

vmax

Представляет в процентах наибольшее из значений vw и vh.

Соответствующие единицы в процентах от малого, большого и динамического размеров области просмотра — svmax, lvmax и dvmax. vmax эквивалентна lvmax — единице длины в процентах от области просмотра, основанной на большом размере.

vmin

Представляет в процентах наименьшее из значений vw и vh.

Соответствующие единицы в процентах от малого, большого и динамического размеров области просмотра — svmin, lvmin и dvmin. vmin эквивалентна lvmin — единице длины в процентах от области просмотра, основанной на большом размере.

vb

Представляет собой процент от размера начального блока-контейнера в направлении блочной оси корневого элемента.

Соответствующие единицы в процентах от малого, большого и динамического размеров области просмотра — соответственно svb, lvb и dvb. vb эквивалентна lvb — единице длины в процентах от области просмотра, основанной на большом размере.

vi

Представляет собой процент от размера начального блока-контейнера в направлении строчной оси корневого элемента.

Соответствующие единицы в процентах от малого, большого и динамического размеров области просмотра — svi, lvi и dvi. vi эквивалентна lvi — единице длины в процентах от области просмотра, основанной на большом размере.

Единицы длины контейнерных запросов

При применении стилей к контейнеру с помощью контейнерных запросов можно использовать единицы длины контейнерных запросов. Эти единицы задают длину относительно размеров контейнера запроса. Благодаря единицам длины, относительным к контейнеру, компоненты можно гибко использовать в разных контейнерах без необходимости повторно вычислять конкретные значения длины.

Если подходящий контейнер для запроса недоступен, единица длины контейнерного запроса по соответствующей оси по умолчанию равна единице малого размера области просмотра (sv*).

Подробнее см. в разделе Контейнерные запросы.

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.

Абсолютные единицы длины

Абсолютные единицы длины представляют физическую величину, если физические характеристики среды вывода известны, например при подготовке макета для печати. Для этого одну из единиц привязывают к физической единице или единице зрительного угла, а остальные задают относительно неё. К физическим единицам относятся cm, in, mm, pc, pt, px и Q. Привязка выполняется по-разному для устройств с низким разрешением, например экранов, и устройств с высоким разрешением, например принтеров.

На устройствах с низким разрешением единица px представляет собой физический эталонный пиксель; остальные единицы задаются относительно неё. Таким образом, 1in определяется как 96px, что равно 72pt. Следствие этого определения в том, что на таких устройствах размеры, заданные в дюймах (in), сантиметрах (cm) или миллиметрах (mm), необязательно совпадают с физическим размером одноимённой единицы.

На устройствах с высоким разрешением дюймы (in), сантиметры (cm) и миллиметры (mm) соответствуют физическим единицам. Поэтому единица px определяется относительно них (1/96 от 1in).

px

Один пиксель. На экранах он традиционно соответствует одному пикселю устройства (точке). Однако в принтерах и на экранах с высоким разрешением одному пикселю CSS соответствуют несколько пикселей устройства. 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">Enter width:</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: #eeeeee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999999;
  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 = `width: ${inputElem.value}`;
  result.appendChild(code);
  resultsDiv.appendChild(result);

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

Результат

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

Совместимость с браузерами

См. также

• Изучение: значения и единицы измерения
• Модуль значений и единиц измерения CSS
• Блочная модель