2012-02-28 2 views
14

1emを要素に適用すると、ブラウザのデフォルト値(通常は16px)または親のfont-size値(右)が使用されます。しかし、もし私がh1要素の中にmargin-top: 1emのようなものを使うと(リセットスタイルシートを使わないので、h1はfont-size: 32pxに設定されます)、親要素がfont-size: 16pxに設定されていても1emは32pxに等しくなります。emを使ったマージンとパディング

ただし、font-size:100%;その不一致を解決します。

私には何が欠けていますか?

+0

お使いのブラウザは何ですか?あなたはフィドルを提供しますか? –

+0

Chrome 17は安定しており、Firefoxでもチェックインされています。 –

答えて

12

1emを要素に適用すると、ブラウザのデフォルト値(通常は16px)またはその親のfont-size値を使用しますか?

いいえ、それはfont-size、独自かかりますが、その親(またはデフォルトのブラウザが指定した値)に基づいてを計算しました。ブラウザで提供されたfont-sizeh1であるため、結果のマージンは32ピクセルです。

ただし、font-size:100%;その不一致を解決します。要素にfont-size: 100%;またはfont-size: 1em;を設定することにより

は、あなたはので、100%に続く何か他のものの上に長として1emを設定し、その親のフォントサイズの100%を使用するように指示しています。

+0

ああ、それは継承された値に基づいています。それはそれを説明する! –

+3

これは継承された値ではなく、計算された値に基づいています。微妙な違いがあります:) – BoltClock

+0

@BoltClockこれでもう少し拡張できますか?私は、emが16ピクセルのブラウザのデフォルトのフォントサイズに基づいて計算されるという同様の理解を持っていました。 W3への引用も素晴らしいでしょう。 –

9

1emは、の要素のfont-sizeに等しいです。したがって、マージンを使用する場合は、マージンを適用する要素のfont-sizeと同じになります。

+1

素晴らしい!ありがとう:-) –

関連する問題