質問: css) emでのサイズ指定 css初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか? また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?
回答: いえ、 the 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. the exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. it may be used for vertical or horizontal measurement. 4.3.2 lengths( http://www.w3.org/tr/css2/syndata.html#length-units ) emは、その要素のフォントサイズを参照しますが、それがfont-size自身に使われた場合は、例外でその親要素のフォントサイズの算出値を参照します。 すなわち、 body{font-size:16px;} div.header{font-size:0.8em;}/* 約12.8px */ h1{ font-size:2em; /* 親要素--たとえばdiv.header内にあれば、div.headerに指定してあるフォントサイズ 25.6px margin:2em;*/ margin:1em; /* 25.6px */ } でなきゃおかしいでしょ(^^) em,exは、フォントサイズを参照する単位なので、自身のサイズを参照していたら無限ループに陥ってしまいます。 たとえば 2emとされたとき、自身のmと同じサイズになったとたんに、mのサイズが倍になり、それを参照すると4倍、8倍、16倍・・・と永久にサイズが決まらない・・・ ======================================================================================================================================================================================================================================================================================================================================================