В чем разница между rem и em в CSS и от чего они наследуются

Что проверяют

Понимаете ли вы, что em считается по-разному в зависимости от свойства, и знаете ли, почему в дизайн-системах предпочитают rem.

Как отвечать

rem считается от размера шрифта корневого элемента <html>, всегда, независимо от вложенности. em считается от размера шрифта того элемента, где применяется, а для самого свойства font-size от размера шрифта родителя.

Именно эта деталь и есть суть вопроса:

.card { font-size: 1.2em; }        /* от шрифта родителя */
.card { padding: 1em; }            /* от собственного шрифта .card */

Отсюда главный практический эффект: em накапливается. Вложенные друг в друга списки с font-size: 0.9em уменьшаются на каждом уровне, и текст в глубине уезжает в нечитаемый. С rem такого нет, значение всегда одно и то же.

Что стоит добавить:

• где что уместно: rem для типографики и отступов между блоками, чтобы вся сетка масштабировалась разом; em для внутренних отступов компонента, которые должны следовать за размером его текста (кнопка с padding: 0.5em 1em сама подстроится под свой кегль);
• доступность: пользователь может увеличить базовый размер шрифта в браузере, и вёрстка на rem подстроится, а на px нет. Задавать html { font-size: 62.5% } ради удобных вычислений сегодня считается плохой практикой именно поэтому;
• соседи: есть ch (ширина нуля) для длины строки, ex, а также lh и rlh, привязанные к высоте строки.

Где спотыкаются

Считают, что em всегда берёт размер родителя. Для всех свойств кроме font-size он берёт размер текущего элемента.

Строят всю сетку на em и получают разные отступы в разных местах при одинаковом коде.

Не знают, что медиазапросы всегда считают em от базового размера браузера, а не от html.