![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
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でのサイズ指定」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/1/787517_5497c28f8bcee/M.jpg)
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-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倍・・・と永久にサイズが決まらない・・・
No.2
- 回答日時:
>また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?
firefox + firebugが良いでしょう。
添付図の黄色がmargin、紫がpadding、水色が内容
適用されているスタイルは左のウィンドウ
firefoxの開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )には、他にもページ製作で欠かせないアドオンが沢山あります。
![「CSS) emでのサイズ指定」の回答画像2](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/6/650963_5497e5d65b1df/M.jpg)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Format 関数 表示書式指定文字...
-
background-color: #ddd;の意味...
-
テキストファイルの行を指定し...
-
指定の文字だけ色を変える
-
HLMT、CSSについて相談です。 ...
-
CSSで14px/1.4の部分の記述は正...
-
特定の文字のみcssを適用するに...
-
FC2ブログの改行幅の質問です。
-
文字の位置、上下のマージンが...
-
<input type="file"> の幅
-
アコーディオンメニューが思う...
-
Excel VBA メール作成について ...
-
CSS) emでのサイズ指定
-
<pre>にフォントを・・・。
-
ブラウザ依存のボタンのデザイ...
-
CSSを一部無効にしたい
-
外部CSSファイルで未定義のclas...
-
fontサイズ指定の ”-(マイナ...
-
バルーンのアイコンをカスタマ...
-
HTMLで特定の文字だけ色を変え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HLMT、CSSについて相談です。 ...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
Format 関数 表示書式指定文字...
-
background-color: #ddd;の意味...
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
リンク文字
-
テキストボックス途中で切れて...
-
jquery.validationEngine.jsカ...
-
テキストエリア内の文字の装飾
-
Excel VBA メール作成について ...
-
fontサイズ指定の ”-(マイナ...
-
特定の文字のみcssを適用するに...
-
Excel VBA メール作成について ...
-
ホームページビルダー作成HPがi...
-
API Sleep関数について
-
iframe 文字化け
-
FireFoxで"display = none"を指...
-
アコーディオンメニューが思う...
おすすめ情報