Относительные единицы изменения em и rem
rem
rem вычисляется относительно шрифта корневого узла <html> DOM, к которому так же можно обращаться с помощью псевдокласса :root.
По умолчанию размер корневого элемента равен 16px;
#rem{font-size: 2rem;}
#px{font-size: 32px;}
<span id='rem'>Hello</span>
<span id='px'>Hello</span>
Hello
Hello
Таким образом можно настроить страницу так, чтобы она меняла только размер шрифта родителя при изменении размеров, а остальные элементы сами поменяют свои свойства стилей заданные в rem.
em
em равняется (1em * на размер шрифта) элемента к которому применяется. Если размер шрифта текущего элемента 16px то поле элемента заданное как 1em будет равно 16px*1em=16px. em может быть меньше 0.5em или больше 1.7em единицы соответственно уменьшая или увеличивая значение свойства стиля элемента. Удобно применять с padding, height, width, border-radius, поскольку они будут масштабировать свойства стиля в зависимости от изменения размеров шрифта. font-size:1.4em для вычисления размера шрифта текущего элемента будет использовать наследуемый размер шрифт.
Если размер шрифта самого элемента сразу задан в em, то за основу для вычисления этого свойства будет взят размер шрифта родителя.
body{font-size:18px}
span{
font-size:1.1;
margin:1.1
}
Размер шрифта элемента span будет равен 18px*1.1em=18,8px, отступы: 18,8px*1.1em=20,68px
Поскольку унаследует размер шрифта от body, преобразует его в em а затем на основе своего вычисленного
шрифта вычислит размер отступов. Данное особенность может привести к нешелательным последствиям, при
большом количестве вложенных в друг друга элементов, т к наследуя от элемента родителя измененный шрифт они
будут уменьшаться или увеличиваться еще больше.