REM и EM — это относительные единицы измерения в CSS, которые зависят от размера шрифта и используются для создания адаптивной и масштабируемой верстки.

EM — это относительная единица, основанная на размере шрифта родительского элемента. Например, если у родителя font-size: 16px, то 1em = 16px. Если у дочернего элемента указано font-size: 1.5em, то его размер будет 24px.
REM — это относительная единица, основанная на размере шрифта корневого элемента (<html>). Обычно браузеры по умолчанию задают font-size для <html> равным 16px, если не переопределено. 1rem всегда равен размеру шрифта корня, независимо от вложенности.

Отличия и применение:

EM зависит от контекста вложенности, что может привести к каскадному увеличению размеров, если использовать несколько уровней.
REM более предсказуем, так как всегда ссылается на корень, что удобно для глобального управления размерами.

Пример:

html { font-size: 16px; }
.container { font-size: 1.5rem; /* 24px */ }
.container p { font-size: 1em; /* 24px, так как 1em от .container */ }
.container p span { font-size: 2em; /* 48px, 2 * 24px */ }

Использование REM удобно для глобального масштабирования интерфейса, а EM — для локального масштабирования относительно родителя.

Расскажи про единицы измерения REM и EM в CSS: что это такое и как они работают?