Hack Frontend Community

Единицы измерения в CSS: px, rem, em

В CSS для задания размеров (отступов, шрифтов, ширины и т.д.) используются различные единицы измерения. Среди них особенно важны: px, em, rem. Они влияют на адаптивность, масштабируемость и наследование стилей.

px — пиксели

  • Абсолютная единица измерения.
  • Задаёт фиксированный размер, не зависящий от шрифта родителя или корня.
  • Не адаптируется под масштабирование, плохо подходит для адаптивного дизайна.
font-size: 16px;
padding: 10px 20px;
  • Подходит для pixel-perfect-дизайна
  • Плохо масштабируется и не учитывает настройки пользователя

em — относительная единица

  • Относится к размеру шрифта родительского элемента.
  • 1em = текущий font-size родителя.
  • Используется для отступов, padding'ов и даже font-size, но может вести себя непредсказуемо при вложенности.
/* родитель */
.parent {
  font-size: 16px;
}

/* потомок */
.child {
  font-size: 1.5em; /* 24px относительно родителя */
}

Вложенность em может накапливаться:

.outer {
  font-size: 16px;
}

.inner {
  font-size: 1.2em; /* 16px × 1.2 = 19.2px */
}

.inner .text {
  font-size: 1.2em; /* 19.2px × 1.2 = ~23px */
}

rem — root em

  • Относится к размеру шрифта корневого элемента (html).
  • 1rem = font-size на уровне <html> (по умолчанию 16px).
  • Не зависит от родителя, что делает rem более предсказуемым.
html {
  font-size: 16px;
}

.button {
  font-size: 1.25rem; /* 20px */
  padding: 0.5rem 1rem; /* 8px 16px */
}
  • Удобно для адаптивной типографики
  • Хорошо сочетается с медиазапросами
  • Прост в масштабировании (изменили 1 значение в html — изменилось всё)

Таблица сравнения

ЕдиницаОтносительно чего?Поддержка масштабированияПрименение
pxАбсолютный пиксель❌Жестко фиксированные размеры
emРодительский font-size✅ (но может накапливаться)Внутренние отступы, margin
remhtml font-size✅Размеры текста, layout, всё

Когда использовать что?

  • px — когда нужно зафиксировать размер независимо от контекста (например, иконка 1px).
  • em — для внутренней масштабируемости компонентов (например, padding, margin).
  • rem — для глобальной типографики, отступов, адаптивного дизайна.

Совет:

Используйте rem для базовых размеров, em — для внутренних пропорций компонентов, и px — только в крайних случаях.