- ベストアンサー
ページのマージン・・・
ページをブラックの背景で制作したいのですが、ブラウザで表記したところ、IEやOperaなど、どのブラウザでも、上下左右に20px程度の白い余白部分が現れ、その内側がブラックの背景で表示されます。 スタイルシート上でも、body{margin:0px;}の指定をしているのですが、原因がわかりますでしょうか。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> padding:0pxを記載追加してもやはりマージンが消えません。 CSSに於けるマージン（margin プロパティ）と、余白という意味でのマージンを混同しないようにした方が賢明です。 それにしても、提示されたソースで再現させようとしても症状は現れませんでした。 可能であれば実際に症状が発生するページを提示するか、より厳密なソースを提示してください。 または、症状の再現が期待できる環境（ブラウザなど）の情報を示してみてください。
その他の回答 (3)
- quads
- ベストアンサー率35% (90/257)
> #containerのbackground-color:#330000とwidth:100%を消去しましたところ、今度は背景が真っ白になりました。 > 何故でしょうか・・・・。 CSSは自分で記述したのではないのですか？ 「ページをブラックの背景で制作したい」のに body内の大概をdivで括って、そのdivに background-color:#FAFAFA; とか指定してるのは何故でしょうか・・・・。
試してみたところ#containerのbackground-color:#330000が支配的になりました。 width:100%はまずいかも。 bodyの色を出したかったらcontainerのbackground-color:#330000は消去した方が良いかも知れないです。
補足
ご回答ありがとうございます！ #containerのbackground-color:#330000とwidth:100%を消去しましたところ、今度は背景が真っ白になりました。 何故でしょうか・・・・。 -----css----- @charset "shift_jis" body { margin:0px; background-color:#330000;} img {border:0px;} p {margin:0; padding:0;} h1,h2,h3,h4,h5,h6{font-size:12px;} #container{ margin:0px; text-align:center;} #wrapper{ width: 800px; margin-left:auto; margin-right:auto; background-image: url("../image/shadow.gif"); background-repeat: repeat-y;} #herder{ width:750px; height:220px; margin-left:auto; margin-right:auto;} #topspace{ width:750px; height:250px; margin-left:auto; margin-right:auto; margin-bottom:10px;} #topspace1{ float:left; width:580px; height:250px;} #topspace2{ float:right; padding:5px; width:158px; height:238px; border: 1px solid #999999; text-align:left; font-size:12px; background-color:#FAFAFA;} #topspace2 ul{ margin:0px; padding-left:20px; list-style-image: url("../image/li_ico.gif"); list-style-type:disc; list-style-position:outside;} #topspace2 li{padding:1px 0px 2px 0px;} #main_contents{ width: 750px;} #footer { width:752px; height:800px; margin-left:auto; margin-right:auto; background-color:FAFAFA;} -----html----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> ---省略--- <style type="text/css"> <!-- @import url(css/cv_body.css); --> </style> </head> <body> <div id="container"> <div id="wrapper"> <div id="herder"> <iframe src="#" width="750" height="220"marginwidth="0" marginheight="0" Frameborder="no" Scrolling="no"></iframe> </div> <div id="topspace"> <div id="topspace1"><img src="#" width="580" height="250"> </div> <div id="topspace2"> <h1><a href="#" target="_blank">**********</a></h1> <ul> <li><a href="#">**********</a></li> <li><a href="#">**********</a></li> <li><a href="#">**********</a></li> <li><a href="#">**********</a></li> <li><a href="#">**********</a></li> </ul> <p style="margin-top:20px;"> <div align="right"><a #" target="_blank">**********</a></div> </p> </div> </div> <div id="footer"> <iframe src="#" width="752" height="800"marginwidth="0" marginheight="0" Frameborder="no" Scrolling="no"></iframe> </div> </div> </div> </body> </html>
- quads
- ベストアンサー率35% (90/257)
関係する要素までのHTMLソースと、関係するCSSソースを提示されれば的確な回答ができるかもしれません。 * {margin:0; padding:0;} を適用させても余白が現れるようなら現物を検証する必要がありそうです。 0には単位をつけても構いません。
補足
padding:0pxを記載追加してもやはりマージンが消えません。 以下にCSSを表記させていただきます。 まだCSSは勉強し始めですのでかなり不都合な点もあるかと思いますが、ご指導いただけましたら幸いです。 body { margin:0px; padding:0px; background-color:#000000;} img {border:0px;} p {margin:0; padding:0;} h1,h2,h3,h4,h5,h6{font-size:12px;} #container{ width: 100%; margin:0px; text-align:center; background-color:#330000;} #wrapper{ width: 800px; margin-left:auto; margin-right:auto; background-image: url("../image/shadow.gif"); background-repeat: repeat-y;} #herder{ width:750px; height:220px; margin-left:auto; margin-right:auto;} #topspace{ width:750px; height:250px; margin-left:auto; margin-right:auto; margin-bottom:10px;} #topspace1{ float:left; width:580px; height:250px;} #topspace2{ float:right; padding:5px; width:158px; height:238px; border: 1px solid #999999; text-align:left; font-size:12px; background-color:#FAFAFA;} #topspace2 ul{ margin:0px; padding-left:20px; list-style-image: url("../image/li_ico.gif"); list-style-type:disc; list-style-position:outside;} #topspace2 li{padding:1px 0px 2px 0px;} #footer { width:752px; height:800px; margin-left:auto; margin-right:auto; background-color:FAFAFA;} ------html部分↓----------- <div id="container"> <div id="wrapper"> <div id="herder"> <iframe src="#" width="750" height="220"marginwidth="0" marginheight="0" Frameborder="no" Scrolling="no"></iframe> </div> <div id="topspace"> <div id="topspace1"><img src="#" width="580" height="250" alt="************"> </div> <div id="topspace2"> <h1><a href="#">************</a></h1> <ul> <li><a href="#">************</a></li> <li><a href="#">************</a></li> <li><a href="#">************</a></li> <li><a href="#">************</a></li> <li><a href="#">************</a></li> </ul> <p style="margin-top:20px;"> <div align="right"><a href="#"target="_blank">************</a></div> </p> </div> </div> <div id="footer"> <iframe src="#" width="752" height="800"marginwidth="0" marginheight="0" Frameborder="no" Scrolling="no"></iframe> </div> </div> </div>
お礼
ありがとうございます。 一部分だけを背景:#FAFAFAにしたかったのですが、いろいろ試しまして解決しました＾＾ お世話になり本当にありがとうございました。