<length>

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Тип данных <length> CSS данных представляет значение расстояния. Значения длин могут использоваться во многих свойствах CSS, таких как width, height, margin, padding, border-width, font-size и text-shadow.

Примечание: Хотя значения <percentage> могут использоваться в некоторых свойствах, принимающих значения <length>, они сами не являются значениями <length>. См. <length-percentage>.

Синтаксис

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

Примечание: Некоторые свойства допускают отрицательные значения <length>, а другие — нет.

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

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

Примечание: Дочерние элементы не наследуют относительные значения, указанные для их родительского элемента; они наследуют вычисленные значения.

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

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

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

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

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

cap: Представляет "высоту заглавных букв" (номинальную высоту прописных букв) font элемента.
ch: Представляет ширину или, точнее, ширину глифа 0 (ноль, символ Unicode U+0030) в font элемента. В случаях, когда определение меры глифа 0 невозможно или непрактично, предполагается, что он имеет ширину 0.5em и высоту 1em.
em: Представляет рассчитанный font-size элемента. Если используется в свойстве font-size само по себе, оно представляет унаследованный размер шрифта элемента.
ex: Представляет x-высоту font элемента. В шрифтах с буквой x, это, как правило, высота строчных букв в шрифте; 1ex ≈ 0.5em во многих шрифтах.
ic: Равно используемой ширине глифа глифа "水" (иероглиф CJK вода, U+6C34), найденного в шрифте, используемом для его рендеринга.
lh: Равно вычисленному значению свойства line-height элемента, в котором оно используется, преобразованному в абсолютную длину. Эта единица позволяет рассчитывать длины, основанные на теоретическом размере идеальной пустой строки. Однако размер фактических блоков строк может отличаться в зависимости от их содержимого.

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

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

rcap: Равно "высоте заглавных букв" (номинальной высоте прописных букв) font корневого элемента.
rch: Равно ширине или ширине глифа 0 (ноль, символ Unicode U+0030) в font корневого элемента.
rem: Представляет font-size корневого элемента (обычно <html>). При использовании в свойстве font-size корневого элемента, оно представляет его начальное значение. Общее значение по умолчанию браузера — 16px, но пользовательские настройки могут это изменить.
rex: Представляет x-высоту font корневого элемента.
ric: Равно значению единицы ic в шрифте корневого элемента.
rlh: Равно значению единицы lh в шрифте корневого элемента. Эта единица позволяет рассчитывать длины, основанные на теоретическом размере идеальной пустой строки. Однако размер фактических блоков строк может отличаться в зависимости от их содержимого.

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

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

Малый

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

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

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

Большой

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

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

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

Динамический

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

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

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

По умолчанию

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

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

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

Примечание: Длины области просмотра недопустимы в блоках объявления @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.

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

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), не обязательно соответствуют размеру физической единицы с тем же названием.

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

Примечание: Многие пользователи увеличивают значение по умолчанию размера шрифта своего пользовательского агента, чтобы сделать текст более читабельным. Абсолютные размеры могут создавать проблемы с доступностью, поскольку они фиксированы и не масштабируются в соответствии с настройками пользователя. По этой причине следует отдавать предпочтение относительным размерам (таким как em или rem при установке font-size.

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: #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 = `width: ${inputElem.value}`;
  result.appendChild(code);
  resultsDiv.appendChild(result);

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

Результат

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

Спецификация
CSS Values and Units Module Level 4 # lengths

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android

`Q`	63	79	49	50	13.1	63	49	46	13.4	8.0	63
`length`	1	12	1	3.5	1	18	4	10.1	1	1.0	≤37
`cap`	118	118	97	104	17.2	118	97	79	17.2	25.0	118
`ch`	27	12	1 ["From Firefox 1 to Firefox 3, `ch` was the width of the M character.", "From Firefox 1 to Firefox 3, `ch` did not work with `border-width` and `outline-width` CSS properties."]	15	7	27	4	15	7	1.5	4.4
`container_query_length_units`	105	105	110	91	16	105	110	72	16	20.0	105
`em`	1	12	1	3.5	1	18	4	10.1	1	1.0	1
`ex`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`ic`	106	106	97	92	15.4	106	97	72	15.4	20.0	106
`lh`	109	109	120	95	16.4	109	120	74	16.4	21.0	109
`rcap`	118	118	Нет	104	17.2	118	Нет	79	17.2	25.0	118
`rch`	111	111	Нет	97	17.2	111	Нет	75	17.2	22.0	111
`rem`	4	12	3.6	11.6	5	18	4	12	4	1.0	2
`rex`	111	111	Нет	97	17.2	111	Нет	75	17.2	22.0	111
`ric`	111	111	Нет	97	17.2	111	Нет	75	17.2	22.0	111
`rlh`	111	111	120	97	16.4	111	120	75	16.4	22.0	111
`vb`	108	108	101	94	15.4	108	101	73	15.4	21.0	108
`vh`	20	12	19 Starting with version 21, viewport-percentage lengths are invalid in `@page`.	20	6	25	19 Starting with version 21, viewport-percentage lengths are invalid in `@page`.	14	6	1.5	4.4
`vi`	108	108	101	94	15.4	108	101	73	15.4	21.0	108
`viewport_percentage_units_dynamic`	108	108	101	94	15.4	108	101	73	15.4	21.0	108
`viewport_percentage_units_large`	108	108	101	94	15.4	108	101	73	15.4	21.0	108
`viewport_percentage_units_small`	108	108	101	94	15.4	108	101	73	15.4	21.0	108
`vmax`	26	16	19 Starting with version 21, viewport-percentage lengths are invalid in `@page`.	15	7	26	19 Starting with version 21, viewport-percentage lengths are invalid in `@page`.	14	7	1.5	1.5
`vmin`	26	1212	19 Starting with version 21, viewport-percentage lengths are invalid in `@page`.	15	7	26	19 Starting with version 21, viewport-percentage lengths are invalid in `@page`.	14	7	1.5	4.4

`vw`	20	12	19 Начиная с версии 21, длины, выраженные в процентах от размера области просмотра, недопустимы в `@page`.	20	6	25	19 Начиная с версии 21, длины, выраженные в процентах от размера области просмотра, недопустимы в `@page`.	14	6	1.5	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/length