Руководство по единицам измерения в CSS

Единицы измерения длины могут быть абсолютными, такими как px, pt, cm и т. д., или относительными, например, проценты (%) или единицы em или rem.

Указание единиц CSS обязательно для ненулевых значений. Однако, если значение равно 0, единица измерения может быть опущена (в конце концов, нулевые пиксели — это то же самое измерение, что и нулевые дюймы).

Относительные единицы измерения

Относительные единицы измерения указывают значение относительно другого значения. Относительными единицами являются:

Единицы em и ex зависят от размера шрифта, применяемого к элементу.

Использование Em единиц измерения

Измерение 1em равно вычисленному значению свойства font-size элемента, на котором оно используется. Может использоваться для вертикального или горизонтального измерения.

Например, если font-size элемента установлен в 16px и line-height установлен в 2.5em, то вычисленное значение line-height в пикселях будет 2.5 x 16px = 40px.

p {
    font-size: 16px;
    line-height: 2.5em;
}

Исключение возникает, когда em указывается в значении самого свойства font-size, в этом случае оно вычисляется относительно размера шрифта родительского элемента.

Когда мы указываем размер шрифта в em, 1em равен унаследованному font-size. Если же, размер шрифта: 1.2em; он делает текст в 1,2 раза больше текста родительского элемента.

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
p {
    font-size: 1.6em;
}
p:firt-letter {
    font-size: 3em;
    font-weight: bold;
}

Давайте разберемся, о чем этот код. Размер шрифта по умолчанию для всех современных браузеров составляет 16px. Наш первый шаг — уменьшить этот размер для всего документа, установив размер шрифта основного font-size на 62,5%, что приведет к сбросу размера шрифта на 10px (62,5% от 16px).

Теперь вы можете установить размер шрифта для любых элементов, используя единицы em, с помощью простого для запоминания преобразования, умножив значение em на 10. Таким образом, 1em = 10px, 1.2em = 12px, 1.4em = 14px, 1.6em = 16px и т.д.

Использование Ex единиц измерения

Единица ex равна высоте x (x-height) текущего шрифта.

Высота x называется так, потому что она часто равна высоте строчной буквы «x», как показано ниже. Однако ex определяется даже для шрифтов, которые не содержат «x».

Абсолютные единицы измерения

Абсолютные единицы длины фиксированы относительно друг друга. Они сильно зависят от носителя, на котором идет просмотр текста. Примеры абсолютных единиц: in, cm, mm, pt, pc и px.

Абсолютные единицы, такие как in, cm, mm и т. д., должны использоваться для печатных носителей и аналогичных устройств с высоким разрешением. Принимая во внимание, что для экранного отображения, такого как настольные устройства и устройства с низким разрешением, рекомендуется использовать пиксельные или em-единицы.

h1 { margin: 0.5in; }       /* inches  */
h2 { line-height: 3cm; }    /* centimeters */
h3 { word-spacing: 4mm; }   /* millimeters */
h4 { font-size: 12pt; }     /* points */
h5 { font-size: 1pc; }      /* picas */
h6 { font-size: 12px; }     /* picas */