Единицы измерения

Размеры шрифтов, ширину блоков и отступы задают числом с единицей измерения: 16px, 50%, 2rem. Единицы бывают абсолютные — всегда одного размера — и относительные, которые зависят от чего-то другого: от родителя, шрифта или окна браузера.

Пиксели

px — пиксель, самая понятная абсолютная единица. Блок шириной 200px будет одинаковым внутри любого родителя:

<style>
  .box {
    width: 200px;
    padding: 10px;
    background: lightskyblue;
  }
</style>
 
<div class="box">Ширина 200px</div>

Пиксель в CSS не обязательно равен точке экрана: на экранах с высокой плотностью на один CSS-пиксель приходится несколько физических точек. Поэтому 16px выглядят примерно одинаково на телефоне и мониторе.

Проценты

% считается от размера родителя. Блок с width: 50% занимает половину ширины своего контейнера, какой бы она ни была:

<style>
  .parent { width: 300px; background: whitesmoke; }
  .half { width: 50%; background: plum; }
</style>
 
<div class="parent">
  <div class="half">50% от 300px = 150px</div>
</div>

Проценты удобны для «резиновых» блоков, которые растягиваются вместе с окном.

em

em равен размеру шрифта текущего элемента. Если у кнопки шрифт 20px, то 1em — это 20 пикселей, а 0.5em — 10. Отступы в em растут вместе с текстом:

<style>
  .btn { padding: 0.5em 1em; background: gold; border: 0; }
  .small { font-size: 12px; }
  .large { font-size: 24px; }
</style>
 
<button class="btn small">Маленькая</button>
<button class="btn large">Большая</button>

Обе кнопки описаны одним правилом, но у большой и отступы больше.

rem

rem равен размеру шрифта корневого элемента — тега <html>. По умолчанию это 16px, поэтому 1rem = 16px, 1.5rem = 24px. В отличие от em, значение не зависит от того, где находится элемент:

<style>
  .title { font-size: 2rem; }
  .text { font-size: 1rem; }
</style>
 
<p class="title">2rem — 32 пикселя</p>
<p class="text">1rem — 16 пикселей</p>

Размер шрифта в rem учитывает настройки браузера: если человек увеличил шрифт, весь сайт станет крупнее. Поэтому для текста rem — хороший выбор.

Единицы экрана

vw и vh — сотая часть ширины и высоты окна браузера. 100vw — вся ширина окна, 50vh — половина высоты:

<style>
  .strip {
    width: 40vw;
    background: lightgreen;
  }
</style>
 
<div class="strip">40% ширины окна</div>

Измените ширину окна — полоса изменится вместе с ним.

Какую единицу выбрать

У нуля единицу не пишут: margin: 0 значит то же, что margin: 0px.

Частая ошибка

Число без единицы для размера браузер считает ошибкой и пропускает объявление. Пробел между числом и единицей — тоже ошибка:

<style>
  .a { width: 200; background: tomato; }
  .b { width: 200 px; background: gold; }
  .c { width: 200px; background: lightgreen; }
</style>
 
<div class="a">width: 200 — не сработало</div>
<div class="b">width: 200 px — не сработало</div>
<div class="c">width: 200px — работает</div>

Исключения — 0 и свойства, которым единица не нужна, например line-height: 1.5.