Размер

Для задания размеров различных элементов в 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. Относительные единицы измерения
Единица	Описание
vw	1% от ширины области просмотра
vh	1% от высоты области просмотра
vmin	1% от меньшего значения из ширины и высоты области просмотра
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>

Примечание

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

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

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

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