Единицы CSS

В CSS есть несколько различных единиц измерения для выражения длины.

Некоторые свойства CSS задают длину: width, margin, padding, font-size, border-width и т. д.

Длина состоит из числа и единицы измерения, например 10px, 2em и т. д.

Между числом и единицей измерения не должно быть пробела. Если значение длины равно 0, единицу измерения можно опустить.

Для некоторых свойств CSS значения длины могут быть отрицательными.

Существует два типа единиц длины: относительные и абсолютные.

Поддержка браузеров

Числа в таблице ниже указывают минимальную версию браузера, поддерживающую эту единицу длины.

Единицы длины Chrome IE Firefox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0* 19.0 6.0 20.0
vmax 26.0 Не поддерживается 19.0 Не поддерживается 20.0

Примечание:Internet Explorer 9 поддерживает vmin через нестандартное имя vm.

Относительная длина

Относительные единицы длины задают длину относительно другого свойства длины. Относительные длины лучше подходят для разных устройств.

 
единица Описание Онлайн-примеры
em Описывает размер шрифта относительно текущего элемента, к которому он применяется, поэтому также является относительной единицей длины. Обычно размер шрифта браузера по умолчанию равен 16px, поэтому 2em == 32px. Попробуйте сами
ex Зависит от высоты строчной английской буквы x Попробуйте сами
ch Ширина цифры 0
rem rem — это сокращение от root em. Когда rem применяется к элементу, не являющемуся корневым, он задаётся относительно размера шрифта корневого элемента; когда rem применяется к размеру шрифта корневого элемента, он задаётся относительно его начального размера шрифта.Попробуйте сами
vw Viewport Width, ширина области просмотра, 1vw = 1% от ширины области просмотра. Попробуйте сами
vh Viewport Height, высота области просмотра, 1vh = 1% от высоты области просмотра. Попробуйте сами
vmin Меньшее из vw и vh. Попробуйте сами
vmax Большее из vw и vh. Попробуйте сами
%    

Note Совет:В чём разница между rem и em? Разница в том, что при использовании rem для задания размера шрифта элемента он всё ещё остаётся относительным размером, но относительным только к корневому элементу HTML.

Абсолютная длина

Единицы абсолютной длины — это фиксированные значения, отражающие реальный физический размер. Единицы абсолютной длины зависят от носителя вывода и не зависят от среды (дисплея, разрешения, операционной системы и т. д.).

единица Описание Онлайн-примеры
cm сантиметр Попробуйте сами
mm миллиметр Попробуйте сами
in Дюймы (1in = 96px = 2.54cm) Попробуйте сами
px * Пиксели (1px = 1/96 от 1in) Попробуйте сами
pt пункт, примерно 1/72 дюйма; (1pt = 1/72in) Попробуйте сами
pc пика, примерно 12pt, 1/6 дюйма; (1pc = 12 pt) Попробуйте сами

Пиксели можно считать лучшими "пикселями устройства", но эта длина пикселя не имеет ничего общего с экранными пикселями текста, который вы видите на дисплее. px на самом деле — единица, измеряемая углом.

Другие расширения