Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу admin@tuhub.ru.

length

CSS length

Тип данных <length> - представляет размер или измерение расстояния. Он состоит из числа (<number>), за которым сразу следует единица измерения, то есть без пробела между ними. Единицы измерения не чувствительны к регистру.

Общие сведения

Многие CSS свойства принимают значения типа <length>, например такие как font-size, margin, line-height, и т. д. Значение <length> в некоторых случаях может быть отрицательным. Некоторые свойства могут ограничивать значение до определённого диапазона. Если значение находится за пределами допустимого диапазона, то запись считается неверной и будет проигнорирована.

CSS предлагает несколько различных единиц измерения для выражения <length>. У некоторых из них есть своя история в типографии, например, пункт (point, pt) и пайка (pica, pc), а другие известны из повседневного использования, например, сантиметр (centimeter, cm) и дюйм (inch, in). Есть также единица, которая была придумана специально для CSS: это пиксель (pixel, px).

CSS также определяет набор и других единиц для измерения <length>, которые вместе с вышеупомянутыми делятся на две категории: абсолютные единицы измерения и относительные единицы измерения.

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

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

Абсолютные длины указываются с использованием числа, после которого идёт абсолютная единица измерения.

px

Несмотря на то что это абсолютная единица измерения, px не определяется как постоянное значение, он определяется относительно устройства на котором просматривается элемент (печатная версия или экран устройства). Они определены как абсолютные в CSS 2.1, но описываются относительным образом, так как устройство может отобразить px любого размера относительно пикселя для получения правильного PPI и расстояния просмотра для конкретного устройства.

Для типичных дисплеев, 1 px в CSS равен 1 пикселю на дисплее, то есть 1 точке на экране.

mm

Один миллиметр.

cm

Один сантиметр. 1cm = 10mm = 37.8px.

in

Один дюйм. 1in = 2.54cm = 96px.

pt

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

pc

Одна пайка. Равна 12 пунктам.

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

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

em

Относительная единица em указывает длину относительно размера шрифта элемента. Если единица измерения используется для настройки свойства font-size элемента, то в результате размер шрифта будет относительным к унаследованному значению.

1em равен значению свойства font-size элемента на котором используется единица измерения. Если размер шрифта изменяется, то и 1em будет менять своё значение в соответствии с размером шрифта.

Например, правило:

h1 { line-height: 1.4em; }

означает, что высота строки элементов h1 будет на 40% больше чем размер шрифта элементов h1. С другой стороны:

h1 { font-size: 1.4em; }

означает, что размер шрифта элементов h1 будет на 40% больше чем наследуемый размер шрифта элементами h1.

Единицы измерения em обычно используются для создания масштабируемых макетов, где текст и свойства элемента необходимо масштабировать по мере изменения размера шрифта, чтобы поддерживать читаемость. Обычно с помощью em устанавливают значения свойств line-height, padding и margin, которые играют важную роль в поддержке и балансе вертикального ритма на странице.

ex

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

В следующем примере, высота строки текста устанавливается в значение 300% от высоты символа x используемого шрифта.

p {
  font-family: "Roboto", sans-serif;
  line-height: 3ex;
}

ch

Единица измерения ch основана на ширине символа 0 (ноль) используемого шрифта.

В следующем примере, значение отступа текста от контейнера устанавливается в значение в  10 раз превышающие ширину символа 0 используемого шрифта.

.container {
  margin: 20ch;
}

rem

Относительная единица измерения rem указывает размер относительно размера шрифта корневого элемента (html элемента). Когда свойство font-size указано у самого корневого элемента, rem ссылается на начальное значение свойства.

Единица измерения rem полезна в адаптивном дизайне, когда она упрощает масштабирование макета просто уменьшая размер шрифта корневого элемента.

В следующем примере,  размер шрифта всех элементов h1 устанавливается в значение на 250% превышающее размер шрифта корневого элемента. Размер шрифта корневого элемента установлен в 100%, а это означает что он получит размер по умолчанию установленный в браузере, обычно это 16px.

html {
  font-size: 100%; /* по умолчанию начальное значение размера шрифта */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

Процентные единицы измерения (от области просмотра)

vh

Единица измерения vh равна 1/100 от высоты области просмотра. Это тоже самое если мы скажем, что 1vh равен 1% от высоты области просмотра.

Например, следующее правило установит размер шрифта у элементов h1 в 150% от размера шрифта элемента в котором он находится:

h1 {
  font-size: 150%;
}
                            

А следующее правило установит размер шрифта у элементов h1 в 10% от высоты области просмотра. То есть если высота области просмотра равна 200 миллиметров, например, то размер шрифта будет установлен в (10 * 200) / 100 = 20 миллиметров.

h1 {
  font-size: 10vh;
}

vw

Единица измерения vw равна 1/100 от ширины области просмотра. Это тоже самое если мы скажем, что 1vw равен 1% от ширины области просмотра. Это тоже самое что и единица измерения vh (см. выше), но основывается на ширине области просмотра вместо высоты.

Например, следующее правило установит размер шрифта у элементов h1 в 150% от размера шрифта элемента в котором он находится:

h1 {
    font-size: 150%;
}
                            

А следующее правило установит размер шрифта у элементов h1 в 8% от ширины области просмотра. То есть если ширина области просмотра равна 200 миллиметров, например, то размер шрифта будет установлен в (8 * 200) / 100 = 16 миллиметров.

h1 {
    font-size: 8vw;
}

vmin

Значение единицы измерения vmin равно минимальному значению из vh и vw. То есть, она принимает значение того чьё значение меньше. Таким образом 1vmin равен 1% от наименьшей стороны области просмотра.

Например, следующее правило установит размер шрифта у элементов h1 в 10% от размера наименьшей стороны области просмотра:

h1 {
  font-size: 10vmin;
}

vmax

Значение единицы измерения vmax равно максимальному значению из vh и vw. То есть, она принимает значение того чьё значение больше. Таким образом 1vmin равен 1% от наибольшей стороны области просмотра.

Например, следующее правило установит размер шрифта у элементов h1 в 10% от размера наибольшей стороны области просмотра:

h1 {
  font-size: 10vmax;
}

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

Тип данных <length> поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE, и на Android и на iOS.

Единицы измерения ch и rem поддерживаются в IE начиная с 9 версии.

Единица измерения ch не поддерживается WebKit браузерами.

Поддержка браузерами единиц измерения vw, vh, vmin и vmax показана в следующей таблице:

Viewport units: vw, vh, vmin, vmax

IE
9
0.13%
10
0.1%
11
2.71%
Edge
15
0.08%
16
1.28%
17
0.36%
18
0%
Firefox
58
0.07%
59
1.98%
60
1.64%
61
0.07%
62
0%
Chrome
64
0.34%
65
1.92%
66
23.09%
67
0.19%
68
0.04%
Safari
10.1
0.27%
11
0.39%
11.1
1.3%
12
0%
TP
0%
iOS Safari
10.3
0.72%
11.0-11.2
2.13%
11.3
5.99%
Chrome for Android
66
30.44%

Пример