В чем разница между rem и em?

`rem` считается от размера шрифта корневого элемента (html), `em` — от размера шрифта текущего элемента (для font-size — от родителя).

rem

html { font-size: 16px; }
.title { font-size: 2rem; }   /* 32px где угодно */

Предсказуемо: значение одинаково в любом месте страницы. Если пользователь увеличит шрифт в браузере, всё масштабируется пропорционально.

em

.button { font-size: 18px; padding: 0.5em 1em; } /* 9px 18px */

• Удобно для отступов, которые должны расти вместе с текстом компонента.
• Во вложенных элементах накапливается: font-size: 1.2em внутри такого же даёт 1.44 от исходного.

Как выбирать

• Размеры шрифтов и глобальные отступы — rem.
• Внутренние отступы компонента, зависящие от его шрифта, — em.

Коротко для собеседования

rem — от шрифта html и не зависит от вложенности, em — от шрифта текущего элемента и накапливается при вложении.

Подробнее: MDN — Единицы измерения