• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:CSS) emでのサイズ指定)

emでのサイズ指定の仕組みとは?

このQ&Aのポイント
  • CSS初心者のため、emでのサイズ指定について調べています。
  • h1,h2,h3,h4,pを2emで指定したところ、すべてのフォントサイズが同じになりました。
  • 各ヘディングが倍のサイズにならなかった理由が分かりません。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

いえ、 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>  <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倍・・・と永久にサイズが決まらない・・・

choco0213
質問者

お礼

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

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?  firefox + firebugが良いでしょう。  添付図の黄色がmargin、紫がpadding、水色が内容  適用されているスタイルは左のウィンドウ firefoxの開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )には、他にもページ製作で欠かせないアドオンが沢山あります。

関連するQ&A