Размер

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

Относительные единицы

Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.

Табл. 1. Относительные единицы измерения
ЕдиницаОписание
emРазмер шрифта текущего элемента
exВысота символа x
chШирина символа 0 текущего элемента
remРазмер шрифта корневого элемента

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

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

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

Табл. 2. Относительные единицы измерения
ЕдиницаОписание
vw1% от ширины области просмотра
vh1% от высоты области просмотра
vmin1% от меньшего значения из ширины и высоты области просмотра
vmaxОпределяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%

Абсолютные единицы

Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Табл. 3. Абсолютные единицы измерения
ЕдиницаОписание
pxПиксель
inДюйм (1 дюйм равен 2,54 см)
cmСантиметр
mmМиллиметр
ptПункт (1 пункт равен 1/72 дюйма)
pcПика (1 пика равна 12 пунктам)

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Относительные единицы</title> <style> h1 { font-size: 30px; } p { font-size: 1.5em; } </style> </head> <body> <h1>Заголовок размером 30 пикселей</h1> <p>Размер текста 1.5 em</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Абсолютные единицы</title> <style> h1 { font-size: 24pt; } p { margin-left: 30mm; } </style> </head> <body> <h1>Заголовок размером 24 пункта</h1> <p>Сдвиг текста вправо на 30 миллиметров</p> </body> </html>

Примечание

При установке размеров обязательно указывайте единицы измерения, например width30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin0).

Internet Explorer поддерживает единицу vm вместо vmin.

Спецификация

СпецификацияСтатус
CSS Values and Units Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация

Браузеры

px, in, cm, mm, pt, pc, em, ex31213.511
ch912272071
rem912411.64.13.6
vw, vh9122020619
vmax1626156.119
vmin9122015619
px, in, cm, mm, pt, pc, em, ex
ch4.42377.1.1
rem2.12124
vw, vh2.119376
vmax4.419376.1
vmin2.119376

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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