Размер

Содержание

Для задания размеров различных элементов в 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	Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


px, in, cm, mm, pt, pc, em, ex	3	12	1	3.5	1	1
ch	9	12	27	20	7	1
rem	9	12	4	11.6	4.1	3.6
vw, vh	9	12	20	20	6	19
vmax		16	26	15	6.1	19
vmin	9	12	20	15	6	19


px, in, cm, mm, pt, pc, em, ex
ch	4.4	2	37	7.1.1
rem	2.1	2	12	4
vw, vh	2.1	19	37	6
vmax	4.4	19	37	6.1
vmin	2.1	19	37	6

Браузеры

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

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

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