📌 Как работать с em и rem в CSS?

Данный пост о двух важных единицах измерения в CSS — em и rem. Часто новички путаются в их использовании, а ведь это мощные инструменты для адаптивного дизайна!

🔹 em — зависит от родительского элемента
em — это относительная единица, которая зависит от размера шрифта родителя. Например:


.parent {
font-size: 20px;
}

.child {
font-size: 1.5em; /* 30px */
}

Здесь 1.5em означает 1.5 * 20px = 30px.

⚠️ Будьте осторожны! Использование em для вложенных элементов может привести к неожиданному увеличению шрифта.

🔹 rem — зависит от корневого элемента
В отличие от em, rem (root em) всегда рассчитывается относительно font-size у . Например:


html {
font-size: 16px;
}

.child {
font-size: 1.5rem; /* 24px */
}

Здесь 1.5rem означает 1.5 * 16px = 24px, независимо от родителя!

🧐 Что выбрать?
✔ rem — удобен для глобального масштабирования (например, для всей страницы).
✔ em — полезен для элементов внутри компонентов (например, padding, margin).

А вы чаще используете em или rem? Напишите в комментариях!