CSS emとremの違い

Note

CSS のサイズを表す単位emとremの違いについて

<html>
  <p><span></span></p>
</html>

emは親要素のサイズを基準にする。

html {
 font-size: 32px;
}
 
{
 font-size: 2em; /* -> 64px; */
}
 
span {
 font-size: 0.5em; /* -> 32px; */
}

remはルートのサイズを基準にする → (root em)

html {
 font-size: 32px;
}
 
p {
 font-size: 2em; /* -> 64px; */
}
 
span {
 font-size: 0.5em; /* -> 16px; */
}

Tip

remの方が扱いやすいのでremを使おう！ emの場合、ネストしてくると訳からなくなる！

🎧 💻 🎛️ ✍️