Справочник HTML & CSS

px, em, rem, %, vw, vh

Единицы длины в CSS: абсолютные пиксели и относительные единицы.

Синтаксис

16px 1.5rem 2em 50% 100vw 100dvh

Параметры

Параметр	Тип	Описание
px	absolute	CSS-пиксель; одинаковый на всех экранах независимо от плотности.
em	relative	Размер шрифта самого элемента (для `font-size` — родителя).
rem	relative	Размер шрифта корневого `<html>`, обычно 16px.
%	relative	Процент от размера родителя (от чего именно — зависит от свойства).
vw \| vh	viewport	1% ширины или высоты окна.
dvh \| svh	viewport	1% высоты окна с учётом меняющейся панели мобильного браузера.
ch	relative	Ширина символа «0» в текущем шрифте.

Примеры

Одна и та же ширина блока в разных единицах:

<style>
  div { background: lightskyblue; margin-bottom: 6px; padding: 4px; }
</style>
 
<div style="width: 150px;">150px</div>
<div style="width: 50%;">50% of the parent</div>
<div style="width: 30vw;">30vw — 30% of the window width</div>
<div style="width: 12rem;">12rem — 12 page font sizes</div>
<div style="width: 20ch;">20ch — about 20 characters</div>

Внутренние отступы в em растут вместе со шрифтом кнопки:

<div style="font-size: 20px;">
  <button style="font-size: 0.8em; padding: 0.5em 1em;">em: grows with the font</button>
</div>

Примечания

Простое правило: rem — для шрифтов и отступов, px — для тонких рамок, % и fr — для раскладки, ch — для длины строки. На телефонах 100vh может быть выше видимой области — берите 100dvh.

См. также

font-size — Размер шрифта.
clamp() — Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
calc() — Вычисляет значение из выражения — даже в разных единицах.
width — Ширина элемента.

Вопросы и ответы по теме

В учебнике

Единицы измерения — Пиксели, проценты, em, rem и единицы экрана — чем они отличаются и когда какую выбрать.

Спасибо, что читаете!