Когда разработчик заканчивает верстку макета HTML-страницы, он неминуемо приступает к оформлению CSS. Тут появляются такие параметры блоков и текста, как цвет, размер и.д. Однако, такая простая вещь, как размер, имеет в себе скрытое многообразие: его можно указать в различных единицах измерения.
Действительно, бывает иногда трудно разобраться во всем разнообразии единиц измерения в CSS. Попробую в одной статье описать основные.
em
Ширина буквы m в текущем шрифте. Например, 3em означает ширину в три буквы m. Разумеется, в вашем шрифте ширина буквы m будет отличаться от ее ширины в другом шрифте. Сменил шрифт — изменились расстояния, заданные с помощью em.
ex
Высота буквы x в текущем шрифте. Правила такие же, как для em, только за основу берется буква x.
px
Размер в пикселах. Здесь стоит иметь ввиду, что на мониторах с высоким разрешением на одном квадратном сантиметре помещается очень много пикселей
in
Размер в дюймах. Один дюйм равен 2.54 сантиметра.
cm
Размер в сантиметрах.
mm
Размер в миллиметрах.
pt
Размер в пунктах. Один пункт = 1/72 дюйма.
pc
Размер в пиках. (12 пунктов).
Проценты
Размер можно указывать в процентах (%) от величины родительского элемента.
Вышеописанные единицы измерения не просто так различны, каждая из них лучше подходит для конкретного случая. Например, блочные элементы лучше указывать в пикселах или пунктах. Размеры шрифтовых надписей — в em или ex. Если веб-страница пойдет на печать, то целесообразно использовать метрические системы измерения (сантиметры, миллиметры) или дюймы, так как они используются в полиграфии. Следует отметить, что недопустимо указывать в качестве размера элемента просто цифру без единицы измерения.