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;
}
としました。
すると、すべてのフォントサイズが同じになりました。
それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか?
また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?
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 … )には、他にもページ製作で欠かせないアドオンが沢山あります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字の位置、上下のマージンが...
-
CSSで14px/1.4の部分の記述は正...
-
fontサイズ指定の ”-(マイナ...
-
h1タグのパンくずリストへの設置
-
HLMT、CSSについて相談です。 ...
-
Excel VBA メール作成について ...
-
Garamond Italicのフォントが指...
-
リンク文字
-
background-color: #ddd;の意味...
-
特定の文字のみcssを適用するに...
-
API Sleep関数について
-
ホームページビルダー作成HPがi...
-
リストの前後の行間をなくす方...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
-
cssファイルの名称付け
-
フォルダ内の写真を画面幅にあ...
-
テキストエディタmiの表示文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
文字の位置、上下のマージンが...
-
テキストボックス途中で切れて...
-
テキストエリア内の文字の装飾
-
Format 関数 表示書式指定文字...
-
background-color: #ddd;の意味...
-
Excel VBA メール作成について ...
-
fontサイズ指定の ”-(マイナ...
-
CSSで14px/1.4の部分の記述は正...
-
Excel VBA メール作成について ...
-
API Sleep関数について
-
h1タグのパンくずリストへの設置
-
jquery.validationEngine.jsカ...
-
テキストファイルの行を指定し...
-
iframe 文字化け
-
全角半角含めて等幅で表示したい
-
HLMT、CSSについて相談です。 ...
-
HTMLで特定の文字だけ色を変え...
-
指定の文字だけ色を変える
おすすめ情報