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

rem и em — это относительные единицы измерения в CSS, но они работают по-разному:

• em зависит от размера шрифта родительского элемента (или текущего элемента для других свойств, например margin). Если у родителя font-size: 16px, то 1em = 16px. Может вызывать каскадные изменения.

.parent { font-size: 20px; }
.child { font-size: 0.8em; } /* 16px */

• rem всегда привязан к корневому элементу (html). Если html { font-size: 16px }, то 1rem = 16px независимо от вложенности.

html { font-size: 16px; }
.element { font-size: 1.5rem; } /* 24px */

Когда использовать:

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

⚠️ em может усложнить поддержку из-за каскадности.