- ベストアンサー
html,css初心者です。ヘッダーの余白について
- ヘッダーの上部分に余白ができてしまいます。HTMLとCSSをはります。
- bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています
- ヘッダーの余白について教えて下さい。
- xxxx17xxxxx
- お礼率21% (6/28)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
body全体にも標準でマージンがあるので、bodyタグに対してmarginを0にセットすれば余白はなくなります。 body { margin: 0 auto; } これでヘッダー上部分の余白がなくなります。 ご参考まで。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
html,bodyのmarinだけでは消えないです。 HTMLですが、ちょっと変則的なので直してから説明します。 ウェブ標準HTML4.01strict+CSS2.1とします。 divのidやclass名は文書構造を補完するために使用します。 リンクやjavascriptのターゲットでない限りidでないほうが良い、何箇所も登場する可能性があるので・・ (下記HTMLはタブを＿に置換してあるので戻してテストすること) ★以降の/*を上から順番に取り除いて、どのマージンが何のマージンか理解すること <!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{background-color:gray;} div.header{background-color:silver;} div.section{background-color:yellow;} div.footer{background-color:aqua;} /* 以下、上から順番に行頭の/* を取り除いていく★ */ /* html,body{margin:0;padding:0;} /* div.header,div.section,div.footer{margin:0;} /* div.header h1,div.section h2,div.footer h2{margin:0;line-height:1.6em;} /* div.header p,div.section p,div.footer p{margin:0;line-height:1.6em;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- t_ohta
- ベストアンサー率38% (5238/13705)
html, body { margin: 0px; } で消えると思います。
お礼
ありがとうございます！完璧になおりました。 本当に助かりました！