CSS）　emでのサイズ指定

解決済

質問者：choco0213
質問日時：2013/03/16 20:53
回答数：2件

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;
}
としました。
すると、すべてのフォントサイズが同じになりました。
それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか？

また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/03/16 23:18

いえ、

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-un … )
　emは、その要素のフォントサイズを参照しますが、それがfont-size自身に使われた場合は、例外でその親要素のフォントサイズの算出値を参照します。

　すなわち、
<body>
　<div class="header">
　　<h1>
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倍・・・と永久にサイズが決まらない・・・

- 0
- 件

通報する

この回答へのお礼

なるほど～！目から鱗です！ありがとうございます！

通報する

お礼日時：2013/04/30 19:15

No.2

回答者： ORUKA1951
回答日時：2013/03/17 09:44

＞また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか？

　firefox + firebugが良いでしょう。
　添付図の黄色がmargin、紫がpadding、水色が内容
　適用されているスタイルは左のウィンドウ
firefoxの開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )には、他にもページ製作で欠かせないアドオンが沢山あります。