Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<length>Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
cap unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки Нет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 Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 7.1Samsung Internet Android Полная поддержка Да
ex unitChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 4Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
ic unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
lh unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
mozmm unit
ЭкспериментальнаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 4 — 59IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android ? Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
Q unit
Экспериментальная
Chrome Полная поддержка 63Edge Нет поддержки НетFirefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 50Safari Нет поддержки НетWebView Android Полная поддержка 63Chrome Android Полная поддержка 63Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 49Opera Android Полная поддержка 46Safari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
rem unitChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 4.1WebView Android Полная поддержка 2Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 4Samsung Internet Android Полная поддержка Да
rlh unit
Экспериментальная
Chrome Нет поддержки НетEdge Полная поддержка ДаFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Полная поддержка ДаFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
vb unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
vh unitChrome Полная поддержка 20Edge Полная поддержка 12Firefox Полная поддержка 19IE Полная поддержка 9Opera Полная поддержка 20Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 19Opera Android Полная поддержка ДаSafari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
vi unit
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
vmax unitChrome Полная поддержка 26Edge ? Firefox Полная поддержка 19IE Нет поддержки НетOpera Полная поддержка 20Safari Полная поддержка ДаWebView Android Полная поддержка 1.5Chrome Android Полная поддержка ДаEdge Mobile ? Firefox Android Полная поддержка 19Opera Android Нет поддержки НетSafari iOS Полная поддержка 4Samsung Internet Android Полная поддержка Да
vmin unitChrome Полная поддержка 20Edge ? Firefox Полная поддержка 19IE Полная поддержка 10
Полная поддержка 10
Полная поддержка 9
Альтернативное имя
Альтернативное имя Использует нестандартное имя: vm
Opera Полная поддержка 20Safari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android Полная поддержка 19Opera Android Нет поддержки НетSafari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
vw unitChrome Полная поддержка 20Edge Полная поддержка 12Firefox Полная поддержка 19IE Полная поддержка 9Opera Полная поддержка 20Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 19Opera Android Полная поддержка ДаSafari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
Viewport-percentage lengths invalid in @pageChrome ? Edge ? Firefox Полная поддержка 21IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Полная поддержка 21Opera Android ? Safari iOS ? Samsung Internet Android ?
1in is always equal to 96pxChrome Полная поддержка ДаEdge ? Firefox Полная поддержка 4IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

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

Метки документа и участники

Внесли вклад в эту страницу: favetisov, mdnwebdocs-bot, ialexi-bl, Fgeniy, Zamkevich, VladdOs
Обновлялась последний раз: favetisov,