Существует много свойств CSS, которые требуют размер в качестве единицы:
- font-size определяет размер текста;
- border-width определяет толщину границ элементов;
- margin определяет пространство между элементами;
- left/right/top/bottom позволяют позиционировать и перемещать элементы.
Наиболее часто используемые единицы:
- px для пикселей;
- % для процентов;
- em для определения размера относительно родительского значения font-size.
Пиксели
Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS.
Пиксель может быть использован для задания фиксированной ширины элемента:
body { width: 400px; }
Или установить размер текста:
body { font-size: 20px; }
Пиксели в CSS являются простыми, поскольку они определяют абсолютные значения и не зависят от других наследуемых свойств CSS.
Они также широко используются для позиционирования и расстояния.
Проценты
Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.
К примеру, блочные элементы, такие как абзацы, естественным образом занимают всю доступную ширину. Следующее правило CSS изменит их размер до половины доступной ширины.
p { width: 50%; }
Проценты могут помочь задать другие свойства CSS, такие как размер текста.
CSS
strong { font-size: 150%; }
HTML
<p>Есть <strong>важные</strong> проблемы, стоящие перед нами.</p>
em
em является относительной единицей и зависит от значения font-size элемента.
Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.
Не следует путать размер em с селектором em, который ориентирован на элемент <em>.
Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши <h1> были вдвое больше, чем основной текст, ваши <h2> в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:
body { font-size: 16px; }
h1 { font-size: 2em; } /* = 32px */
h2 { font-size: 1.5em; } /* = 24px */
aside { font-size: 0.75em; } /* = 12px */
Если вы решите изменить размер текста <body>, относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.
Только изменив одно значение, поменяются и все остальные значения:
body { font-size: 20px; }
h1 { font-size: 2em; } /* = 40px */
h2 { font-size: 1.5em; } /* = 30px */
aside { font-size: 0.75em; } /* = 15px */
rem
Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент <html>.
html { font-size: 18px; }
body { font-size: 1rem; } /* = 18px */
h1 { font-size: 2rem; } /* = 36px */
h2 { font-size: 1.5rem; } /* = 27px */
Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.
Если вы установили html { font-size: 18px; }:
- 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
- 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.
Быстрый пример, где 2em отличается от 2rem:
html { font-size: 20px; }
p { font-size: 0.8rem; } /* = 16px */
p span { font-size: 2em; } /* = 16px * 2 = 32px */
p strong { font-size: 2rem; } /* = 20px * 2 = 40px */
<span> полагается на значение font-size у <р>, в то время как <strong> полагается на значение font-size у <html>.
Какую единицу использовать?
Я бы рекомендовал начать с пикселей: поскольку это абсолютная величина, они не зависят от контекста элемента. Пиксели простые, позволяют установить размер текста, ширину и высоту изображения, толщину границы, координаты положения и др.
Проценты и значения em могут быть использованы наряду с пикселями, особенно для относительных размеров текста.
Перейти к заданиям
Автор: Джереми Томас
Последнее изменение: 12.04.2018