Работать с размерами в CSS приходится очень часто: нужно задавать размеры элементов, размеры текста и.т.д.

380_big

В этой заметке я хочу привести список всех возможных значений, которые можно задавать в стилях CSS для указания размеров. Это делается для того, чтобы вы могли иметь общее представление о тех единицах измерения, с которыми можно встретиться.

Их можно разделить на 3 большие группы.

1) Просто целые и действительные числа без единицы измерения:

Целые числа от 0, 1, 2, 3, ...

Действительные числа  - числа которые содержат целую и десятичную, сотую и.т.д. часть, которая указывается после знака "."

Например,

0.55 или 4.33 и.т.д.

Числа могут быть как отрицательные, так и положительные.

2) Абсолютные размеры:

in: дюймы— 1 дюйм равен 2.54 сантиметра.

cm: сантиметры

mm: милиметры

pt: пункты— пункт равен 1/72 - ой одного дюйма.

pc: пики— 1 пика равно 12 пунктам.

px: пиксель — 1px равен 0.75pt.

3) Относительные размеры:

em - это размер свойства 'font-size' одного из элементов на веб-странице умноженное на определенный коэффициент.

ex - это размер свойства 'x-height' одного из элементов на веб-странице умноженное на определенный коэффициент.

% - размер, который составляет определенную часть (%) от родительского элемента.

Кому интересно почитать об этих единицах измерения в первоисточнике, привожу ссылку на соответствующий раздел спецификации:

http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units

Далее давайте остановимся на каждом из этих значений более подробно.