More than 3 years have passed since last update.

余白のemがカンプ通りのpxにならない

Posted at 2020-08-29

現象

フォントと余白(` padding` 、` margin` )のサイズ指定にemを使用。 Chromeの検証ツールで確認すると、余白がカンプのpxよりも小さい箇所がある。

emは親要素のフォントサイズを継承するため、フォントサイズを指定すると余白も変動する。親要素のサイズが頭から抜けていて、デフォルトサイズ16pxで計算していたのが原因でした。

1. フォントサイズを考慮して再計算する。
デフォルトサイズが16px、親要素のフォントサイズが15px(0.9375em)、` padding` に上下左右30pxを指定したい場合、
30÷15=2rem　を指定する。 2.

remを使用する。

[CSS の値と単位 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units "CSS の値と単位 - ウェブ開発を学ぶ | MDN")

解釈が間違っていたら教えてください。