em
зависит от размера шрифта родителя (font-size
).
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}
Но если
.child
вложен в .parent
, то он наследует font-size
, а его em
вычисляется относительно родителя..parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}
.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}
rem
всегда зависит от font-size
у <html>
. html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 2 * 16px = 32px */
}
Используйте
rem
, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте
em
, если хотите, чтобы элементы зависели от родителяСтавь 👍 и забирай 📚 Базу знаний