Измерение расстояния. Длины принимают форму числа, за которым следует одно из различных сокращений абсолютных или относительных единиц измерения.
Там, где длина равна нулю, суффикс единицы измерения необязателен. padding: 0px также может быть записан как padding: 0, например.
Абсолютные длины
px
Единица измерения: px.
Описание: ссылочный пиксель. Обычно равно физическому пикселю (например, одной из светоизлучающих точек, составляющих экран монитора), хотя может быть больше на дисплеях с высоким разрешением или при увеличении страницы.
Пример: margin-left: 50px.
in
Единица измерения: in.
Описание: дюйм. Один дюйм, при условии, что плотность пикселей дисплея равна 96dpi (таким образом, 1in равно 96px).
Пример: width: 4in.
pc
Единица измерения: pc.
Описание: pica. 1/6 дюйма (1pc равно 0.167in или 16px).
Пример: width: 24pc.
pt
Единица измерения: pt.
Описание: точка. 1/72 дюйма (1pc равно 0.014in или 1.333px).
Пример: font-size: 14pt.
cm
Единица измерения: cm.
Описание: сантиметр. Один сантиметр, при условии, что плотность пикселей дисплея равна 96dpi (таким образом, 1cm равно 37.795px).
Пример: height: 7cm.
mm
Единица измерения: mm.
Описание: миллиметр. 1/10 сантиметра (so 1mm равно 0.1cm, или 3.780px).
Пример: height: 70mm.
q
Единица измерения: q.
Описание: четверть миллиметра. 1/40 сантиметра (1mm равно 0.025cm или 0.945px).
Пример: height: 280q.
Поскольку эти единицы измерения предполагают плотность 96 точек на дюйм, измерения не обязательно равны фактической физической длине (7cm например, на вашем мониторе может не быть семи сантиметров). Как таковые, они, строго говоря, не являются абсолютными, но именно так они официально классифицируются.
Относительные длины
Шрифт-относительный
em
Единица измерения: em.
Описание: em. Вычисленное значение font-size свойства box. Если используется для font-size самого себя, это вычисленное значение унаследованного размера шрифта.
Пример: font-size: 1.5em.
ex
Единица измерения: ex.
Описание: x-высота. Обычно равно высоте символа “x” в нижнем регистре. Если это значение невозможно вычислить, оно равно 0.5em.
Пример: line-height: 3ex.
ch
Единица измерения: ch.
Описание: символ. Обычно равно ширине символа “0”. Если это значение невозможно вычислить, оно равно 0.5em.
Пример: font-size: 2ch.
rem
Единица измерения: rem.
Описание: root em. Вычисляемое значение font-size свойства поля корневого элемента. Если используется для font-size самого элемента, это начальный размер шрифта.
Пример: width: 20rem.
Internet Explorer 9 и 10 немного непостоянны, когда дело доходит до rem. Они не распознают его при использовании со свойством font. IE 8 и ниже вообще не распознают его.
Область просмотра в процентах
vw
Единица измерения: vw.
Описание: ширина области просмотра. Равно 1% от ширины области просмотра.
Пример: width: 50vw.
vh
Единица измерения: vh.
Описание: высота окна просмотра. Равно 1% от высоты окна просмотра.
Пример: line-height: 10vh.
vmin
Единица измерения: vmin.
Описание: минимальный видовой экран. Равно vw или vh — в зависимости от того, что меньше.
Пример: margin: 5vmin.
vmax
Единица измерения: vmax.
Описание: максимальный видовой экран. Равно vw или vh — в зависимости от того, что больше.
Пример: padding: 10vmax.
vmax
Единица измерения: vmax.
Описание: значение не поддерживается Internet Explorer / Edge. Кроме того, vmin не поддерживается Internet Explorer 9. В довершение всего Internet Explorer версий 8 и ниже не поддерживает никаких значений области просмотра.
Страницы в тему:
- Значение CSS: В процентах
Руководства:
- Селекторы, свойства и значения (Урок CSS для начинающих): Введение в длины.
