ヘッダーの余白について教えて下さい。どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・あいうえお CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。

html,css初心者です。ヘッダーの余白について

解決済

質問者：xxxx17xxxxx
質問日時：2012/07/17 11:53
回答数：3件

ヘッダーの余白について教えて下さい。

どうしてもヘッダーの上部分に余白ができてしまいます。
HTMLとCSSをはります。

bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・

<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="font.css" type="text/css">
</head>
<body>
<div id="header">
あいうえお
</div>
</body>
<html>

CSS

#header{
width: 980px;
margin: 0 auto;
background: #fff;
text-align: left;
}

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： qualheart
回答日時：2012/07/17 15:30

body全体にも標準でマージンがあるので、bodyタグに対してmarginを0にセットすれば余白はなくなります。

body {
margin: 0 auto;
}

これでヘッダー上部分の余白がなくなります。
ご参考まで。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！完璧になおりました。

本当に助かりました！

通報する

お礼日時：2012/07/18 17:44

No.2

回答者： ORUKA1951
回答日時：2012/07/17 14:03

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">

＿</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>