柔軟に働き方を選ぶ時代に必要なこと >>

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

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

「CSS) emでのサイズ指定」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

いえ、


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倍・・・と永久にサイズが決まらない・・・
    • good
    • 0
この回答へのお礼

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

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

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


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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング