• ベストアンサー

CSSで余白とパディングに”0”を指定したのに上部に余白ができてしまう

DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

h1のスタイル設定がないのが原因ですね。 CSSをやると最初の方でつまずく代表例のようなパターンです。 h1にも余白0などの数値を設定することで余白がなくなるはずです。

magier
質問者

お礼

全くもってその通りでした。。。 初歩的な質問ですいませんでした!

その他の回答 (1)

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

h1のstyleが無いからじゃない? h1のstyleも設定したらどうなる?

magier
質問者

お礼

すいません、一度h1へ試したと思い込んでました。 やってみたら出来ました。。。 初歩的質問してしまってすいませんでした!