Единицы измерения длины могут быть абсолютными, такими как px
, pt
, cm
и т. д., или относительными, например, проценты (%
) или единицы em
или rem
.
Указание единиц CSS обязательно для ненулевых значений. Однако, если значение равно 0
, единица измерения может быть опущена (в конце концов, нулевые пиксели — это то же самое измерение, что и нулевые дюймы).
Длина (length) — это измерение, содержащее числовое значение и единицу измерения, например 10px
, 2em
, 50%
и т. д. Пробел не должен появляться между числом и единицей.
Относительные единицы измерения
Относительные единицы измерения указывают значение относительно другого значения. Относительными единицами являются:
Единица | Описание |
---|---|
em | текущий размер шрифта |
ex | x-height текущего шрифта |
Единицы 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 |
Дюймы — 1 дюйм равен 2,54 см. |
cm |
Сантиметры. |
mm |
Миллиметры. |
pt |
Points – В CSS одна точка определяется как 1/72 дюйма (0,353 мм). |
pc |
Picas – 1pc равно 12pt. |
px |
Пиксели – 1px равен 0.75pt. |
Абсолютные единицы, такие как 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 */
Таблицы стилей, которые используют относительные единицы измерения, такие как em
или процент (%
), могут легче масштабироваться из одной среды в другую.