CSS одиниці: px, rem, em

У CSS використовуються різні одиниці вимірювання для встановлення розмірів (відступи, шрифти, ширини тощо). Серед них особливо важливими є: px, em, rem. Вони впливають на відповідність, масштабованість та спадкування стилів.

px — пікселі

Абсолютна одиниця вимірювання.
Встановлює фіксований розмір, незалежний від шрифту батьківського або кореневого елемента.
Не адаптується до масштабування, погано підходить для адаптивного дизайну.

css

font-size: 16px;
padding: 10px 20px;

Підходить для дизайну з точним рендерингм
Погано масштабується і не враховує налаштування користувача

em — відносна одиниця

Відносна до розміру шрифту батьківського елемента.
1em = розмір шрифту поточного батьківського елемента.
Використовується для відступів, внутрішніх відступів і навіть розміру шрифту, але може поводитися непередбачувано при вкладенні.

css

/* батьківський */
.parent {
  font-size: 16px;
}

/* дочірній */
.child {
  font-size: 1.5em; /* 24px відносно батька */
}

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

css

.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 — кореневий em

Відносна до розміру шрифту кореневого елемента (html).
1rem = розмір шрифту на рівні <html> (16px за замовчуванням).
Незалежна від батьківського елемента, що робить rem більш передбачуваним.

css

html {
  font-size: 16px;
}

.button {
  font-size: 1.25rem; /* 20px */
  padding: 0.5rem 1rem; /* 8px 16px */
}

Зручно для адаптивної типографіки
Добре працює з медіа-запитами
Легко масштабується (зміна 1 значення в html — все змінюється)

Таблиця порівняння

Одиниця	Відносно?	Підтримка масштабування	Застосування
`px`	Абсолютний піксель	❌	Фіксовані розміри
`em`	Розмір шрифту батька	✅ (але може накопичуватися)	Внутрішні відступи, маргін
`rem`	`html font-size`	✅	Розміри тексту, макет, все

Коли що використовувати?

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

Порада:

Використовуйте rem для базових розмірів, em — для внутрішніх пропорцій компонентів, а px — лише в крайніх випадках.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

CSS одиниці: px, rem, em

#px — пікселі

#em — відносна одиниця

#rem — кореневий em

#Таблиця порівняння