CSSでfont-size以外にemを使用したときに注意すべきポイント
余白の数値を合わせているのにレイアウトが揃わない
仕事で既存のレイアウトを調整しているとき、emの値を合わせているのにレイアウトが揃わない…ということでちょっとハマってしまいました。
emとは、親要素のfont-sizeの値を参照する単位です。 親要素のfont-sizeは同じなのにどうしてだろう、と思っていたのですが…
フォントサイズと余白で基準にする値が違う
width/height および margin/paddingにemを使用した場合、その要素自体のfont-sizeの値が基準となります。
.box1{
font-size:1.0em;
width:5em;
height:5em;
padding:1.0em;
margin:0.5em;
}
.box2{
font-size:0.5em;
width:5em;
height:5em;
padding:1.0em;
margin:0.5em;
}
この場合それぞれの幅、余白の値は、 box1は1em=16pxが基準になるのに対し、 box2は1em=8pxが基準となります。
