<length>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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> интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией анимации.

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

Specification
CSS Values and Units Module Level 4
# lengths

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<length>
Q unit
cap unit
ch unit
Container query length units cqw, cqh, cqi, cqb, cqmin, cqmax
em unit
ex unit
ic unit
lh unit
rcap unit
rch unit
rem unit
rex unit
ric unit
rlh unit
vb unit
vh unit
vi unit
dvb, dvh, dvi, dvmax, dvmin, dvw units
lvb, lvh, lvi, lvmax, lvmin, lvw units
svb, svh, svi, svmax, svmin, svw units
vmax unit
vmin unit
vw unit

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.