1emはどれくらいの大きさを示しているか

auです。

CSSでは、大きさを指定する値にpxやemを使います。

pxはよく見かけますが、emは何を表しているのかなーと思ったので調べてみました。

em

emは、親要素の相対値を表します。

1em = 100%と考えれば良いです。

例えば、親要素でfont-sizeが12pxで指定されている場合、1em = 12pxと同じとなります。

2em = 24px
2.5em = 30px

といった感じですね。

単位を見てもひよらずに、何を表しているのかを冷静に判断できるようになりたいです。