| Единица измерения | Краткая запись | Прим. в коде | Описание | Пример кода |
|---|---|---|---|---|
| Абсолютные единицы | ||||
| Сантиметр | см | cm | Стандартный метрический сантиметр | span {margin-left: 5cm;} |
| Дюйм | дюйм | in | Стандартный северо-американский дюйм | p {word-spacing: 3in;} |
| Миллиметр | мм | mm | Стандартный метрический миллиметр | p {font-size: 25mm;} |
| Пика | пк | рс | Стандартная издательская единица, равная 12 пунктам | p {font-size: 22pc;} |
| Пункт | пт | pt | Стандартная издательская единица, занимающая 72 пункта на дюйм | body {font-size: 16pt;} |
| Относительные единицы | ||||
| Ems | em | em | Ширина прописной буквы «М» для текущего шрифта (обычно совпадает с размером шрифта) | p {letter-spacing: 10em;} |
| Exs | ex | ex | Высота буквы х для текущего шрифта | p {line-height: 3ex;} |
| Пиксель | пикс | рх | Размер пикселя данного монитора | p {padding: 14px;} |
| Проценты | % | % | Устанавливает размер шрифта относительно базового размера (150% означает увеличение размера шрифта в 1,5 раза относительно базового) | div {width: 80%;} |
Условно единицы измерения в CSS можно разделить на три группы:
1. Величины, которые используются для измерения длин реальных предметов:
in — дюймы;
cm — сантиметры;
mm — миллиметры.
2. Величины, которые пришли в CSS из типографии. Они используются для установки размеров шрифта, межстрочных интервалов и прочих типографских величин. Эти величины часто используются полиграфистам:
pt — типографский пункт;
pc — пика;
ex — высота строчной буквы «x» в шрифте.
3. Величины, которые являются относительными, то есть реальный размер элемента вычисляется относительно какой-либо иной величины:
em — вычисляется относительно размера шрифта элемента;
px — пиксель, вычисляется относительно устройства отображения;
% — процент, такие величины вычисляются относительно размеров элемента-предка.
Величины: %, px, em, ex являются относительными, величины: in, cm, mm, pc, pt — абсолютными. При создании сайта лучше всего использовать относительные размеры, так как они масштабируются, и сайт будет смотреться на самых разных разрешениях нормально.