【完全保存版】emとremの違いを理解する｜スキプラ＠元エンジニア

はじめにcssで文字サイズを指定するには、2つの方法があります。 ① px指定の絶対指定 ② em/rem/%による相対指定 多くの方はpx指定による絶対指定が多いかと思います。 ほぼ問題にはなりませんが、案件で細かいところまで対応していると、実はpxだとブラウザによって微妙に表示サイズが異なる問題が起きます。 そのため、em/rem/%などによる相対指定を使うケースが多くなってきています。 ただ、emとremって言葉も似てるし、違いがよくわからないですよね。 なので、今回は分かりやすく解説していきます。 emは親要素のfont-sizeを基準にする相対指定であるemは、親要素のfont-sizeを基準にします。 これはどういうことか、実際のコードを見たほうが早いので見てみましょう。 <p class="p-em"> これは2em(64px)です <span class="span-em"