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

現象

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

原因

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

対処法

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

2. remを使用する。

参考リンク

CSS の値と単位 - ウェブ開発を学ぶ | MDN

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