<length>

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

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

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

Синтаксис

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

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

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

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

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

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

Единицы, зависящие от шрифта, определяют значение <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 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.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<length>Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Q unit
Экспериментальная
Chrome Полная поддержка 63Edge Нет поддержки НетFirefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 50Safari Нет поддержки НетWebView Android Полная поддержка 63Chrome Android Полная поддержка 63Firefox Android Полная поддержка 49Opera Android Полная поддержка 46Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 8.0
cap unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
ch unitChrome Полная поддержка 27Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 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.
IE Полная поддержка 9Opera Полная поддержка 20Safari Полная поддержка 7WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 27Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 7Samsung Internet Android Полная поддержка 1.5
ex unitChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
ic unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
lh unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
mozmm unit
ЭкспериментальнаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 4 — 59IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки 4 — 59Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
rem unitChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 4.1WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 4Samsung Internet Android Полная поддержка 1.0
rlh unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
vb unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
vh unitChrome Полная поддержка 20Edge Полная поддержка 12Firefox Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Полная поддержка 9Opera Полная поддержка 20Safari Полная поддержка 6WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 25Firefox Android Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 6Samsung Internet Android Полная поддержка 1.5
vi unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
vmax unitChrome Полная поддержка 26Edge Полная поддержка 16Firefox Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 6.1WebView Android Полная поддержка 1.5Chrome Android Полная поддержка 26Firefox Android Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5
vmin unitChrome Полная поддержка 26Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
Альтернативное имя
Альтернативное имя Использует нестандартное имя: vm
Firefox Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Полная поддержка 10
Полная поддержка 10
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: vm
Opera Полная поддержка 15Safari Полная поддержка 6.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5
vw unitChrome Полная поддержка 20Edge Полная поддержка 12Firefox Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Полная поддержка 9Opera Полная поддержка 20Safari Полная поддержка 6WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 25Firefox Android Полная поддержка 19
Замечания
Полная поддержка 19
Замечания
Замечания Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 6Samsung Internet Android Полная поддержка 1.5

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.