<length>

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

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

Синтаксис

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

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

Единицы измерения

Относительные единицы измерения

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

Единицы, зависящие от шрифта

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

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

cap
Представляет высоту заглавных букв в шрифте, применённом к элементу.
ch
Представляет ширину символа "0" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.
em
Представляет подсчитанный размер шрифта элемента. Если используется в свойстве font-size, представляет унаследованный размер шрифта.
ex
Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах 1ex ≈ 0.5em.
ic
Равна используемой в шрифте ширине символа "" (ККЯ, символ "вода", U+6C34).
lh
Равна рассчитанному значению свойства line-height, переведённому в абсолютные единицы измерения.
rem
Представляет размер шрифта корневого элемента (обычно <html>). Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).
rlh
Равна рассчитанному значению свойства line-height корневого элемента (обычно <html>), переведённому в абсолютные единицы измерения. Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию.
Единицы, зависящие от размеров экрана

Эти единицы определяют значение <length> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках @page.

vh
Равна 1% высоты блока содержимого.
vw
Равна 1% ширины блока содержимого.
vi
Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.
vb
Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.
vmin
Равна vh или vw в зависимости от того, что из них меньше.
vmax
Равна vh или vw в зависимости от того, что из них больше.

Абсолютные единицы измерения

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

Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения px представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, 1in определяется как 96px, что равно 72pt. Последствием такого способа определения является то, что длины, описанные в дюймах (in), сантиметрах (cm) или миллиметрах (mm) необязательно равны одноимённым физическим единицам.

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

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

px
Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея. 1px = 1/96  от 1in.
cm
Один сантиметр. 1cm = 96px/2.54.
mm
Один миллиметр. 1mm = 1/10 от 1cm.
Q
Четверть миллиметра. 1Q = 1/40 от 1cm.
in
Один дюйм. 1in = 2.54cm = 96px.
pc
Одна пайка. 1pc = 12pt = 1/6 от 1in.
pt
Одна точка. 1pt = 1/72 от1in.
mozmm  , удалена в Firefox 59
Экспериментальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.

Интерполяция

При анимации значения <length> интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией (en-US) анимации.

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

Specification Status Comment
CSS Values and Units Module Level 4
Определение '<length>' в этой спецификации.
Редакторский черновик Добавлены единицы vi, vb, ic, lh, и rlh.
CSS Values and Units Module Level 3
Определение '<length>' в этой спецификации.
Кандидат в рекомендации Добавлены единицы ch, rem, vw, vh, vmin, vmax, и Q.
CSS Level 2 (Revision 1)
Определение '<length>' в этой спецификации.
Рекомендация Явно определены единицы empt, pc, и px.
CSS Level 1
Определение '<length>' в этой спецификации.
Рекомендация Первое определение. Неявно определены единицы empt, pc, и px.

Поддержка браузерами

BCD tables only load in the browser