Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 24 июня 2026 г.
📌 Как работать с em и rem в CSS? — 24 июня 2026 г. в 06:15:31.283
📌 Как работать с 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>. Например: html { font-size: 16px; } .child { font-size: 1.5rem; /* 24px */ } Здесь 1.5rem означает 1.5 * 16px = 24px, независимо от родителя! 🧐 Что выбрать? ✔ rem — удобен для глобального масштабирования (например, для всей страницы). ✔ em — полезен для элементов внутри компонентов (например, padding, margin). 👉 @frontend_1