- ベストアンサー
最上部の余白の原因
- XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいるが、タイトル部分の上に対してのマージンによって<div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまう。
- ヘッダーの中で中央ぐらいにTitleという文字がくることを想定していたが、それが実現できていない。
- この問題の原因はなんでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
borderがないと、サイズの算出が出来ない。 ★それ以外に *はCSS2以降制定された全称セレクタ(詳細度0)です。CSS2で書くなら、タイプセレクタを書いておいたほうが良いです。 スタイルを指定するためにclass名を付けるのではありません。(あくまで文書構造を示すためと考えましょう。後で自分自身で見直してもわからなくなります。)きちんとセレクタを書けばclass名は不要です。何よりもそのほうがわかりやすい。 下記ソースのdiv.header div.abstract h1{}は、「headerブロック内のabstract(要約)の見出しは・・」とHTMLを見なくても、それについて設定してあるのがわかります。 transitinalは、HTML4.01の勧告(1999)以降、非推奨です。 「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」 XHTML1.1、および次期HTML5では、完全になくなります。いい加減使うのは止めましょう。 ★下記はHTML4.01strictです。 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済み。なお、＿に戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body,html{margin:0;padding:0;} div.header{ background-color:blue; width:800px; height:250px; border:solid 1px blue; text-align:center;/* for IE */ } div.header h1{ text-align:center; width:200px; height:50px; margin: 99px auto 10px auto; line-height:50px; background-color:red; color:white; } div.header p{ text-align:left; } div.header div.abstract{ ＿margin-top:10px; ＿background-color:white; ＿width:70%; ＿margin:10px auto; ＿padding:1ex; } div.header div.abstract h1{ width:100%; font-size:1.4em; height:20px; margin:0 auto; line-height:20px; background-color:inherit; color:black; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>Title</h1> ＿＿<div class="abstract"> ＿＿＿<h1>要約</h1> ＿＿＿<p>このページは・・</p> ＿＿</div> ＿</div> </body> </html>
その他の回答 (3)
- Questa
- ベストアンサー率48% (13/27)
親子ボックス間のマージン相殺が原因です。 相殺の結果、P要素の margin-topが DIV要素を突き抜け、さらに BODY要素を 突き抜けています。真っ白な余白は HTML要素の背景色です。 （BODY要素と HTML要素に異なる背景色を付ければ一目瞭然です。） この現象は隣り合うマージンの間に何かがあれば発生しませんので、 DIVに上ボーダー、上マージン、before疑似要素などを付けるとよいでしょう。 IE6,7ではご質問にあるような現象が起きませんが、上記の対策を施しても 悪影響はありません。
お礼
ありがとうございます！
- naokita
- ベストアンサー率57% (1008/1745)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の標準モードなら、 marginをpaddingにした方がよいでしょう。positionでも良い。 *{ margin:0; padding:0; } .header{ background-color:blue; width:590px; /* ← -変更した */ height:150px; /* ← -変更した */ padding: 100px 0 0 210px; /* ← その分追加した */ } .title{ width:200px; height:50px; /* ← 削除してpadding:20px 0;text-align:center;とかの方が良いかも */ background-color:red; color:white; /* margin-left:210px; ← 不要 */ /* margin-top:100px; ← 不要 */ } .headerにpが１個だけなら、classは不要で、 .header p{～～}で良いのでは？ ※ それと、普通は headerはIDかな。。 #1さんが云う.titleはh1が妥当です。h1{ font-size:～～;}とか
お礼
ありがとうございます！
<div>の中が空(<p>以外)だからです。<p>にマージンを反映する際に、ほかに中身のない<div>が一緒にマージンを取っています。 ところで ＞<div class="header"> ＞<p class="title">Title</p> ＞</div> 「Title」なのに<p>？なぜ<h1～6>じゃない？ というか、中身が一つしかない<div>がおかしい。 まごうかたなき「レイアウトのためのマークアップ」になっている。こういうのはやっちゃだめ。 XHTMLで書くぐらいなら「文法違反だけしてない」ようなソースは書かないようにしましょう。 <h1>Title</h1> h1{ background-color:blue; } h1:first-line{ background-color:red; color:white; } 疑似クラス「first-line」を使い上記のように指定し、ここから調整してみてください。
お礼
ありがとうございます！
お礼
ありがとうございます！