ページのマージン・・・

解決済

質問者：goaldast
質問日時：2007/02/22 00:59
回答数：4件

ページをブラックの背景で制作したいのですが、ブラウザで表記したところ、IEやOperaなど、どのブラウザでも、上下左右に20px程度の白い余白部分が現れ、その内側がブラックの背景で表示されます。
スタイルシート上でも、body{margin:0px;}の指定をしているのですが、原因がわかりますでしょうか。

通報する

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

質問の本文を隠す

回答 (4件)

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

No.2ベストアンサー

回答者： quads
回答日時：2007/02/22 02:26

> padding:0pxを記載追加してもやはりマージンが消えません。

CSSに於けるマージン（margin プロパティ）と、余白という意味でのマージンを混同しないようにした方が賢明です。

それにしても、提示されたソースで再現させようとしても症状は現れませんでした。
可能であれば実際に症状が発生するページを提示するか、より厳密なソースを提示してください。
または、症状の再現が期待できる環境（ブラウザなど）の情報を示してみてください。

- 0
- 件

通報する

No.4

回答者： quads
回答日時：2007/02/22 16:37

> #containerのbackground-color:#330000とwidth:100%を消去しましたところ、今度は背景が真っ白になりました。

> 何故でしょうか・・・・。

CSSは自分で記述したのではないのですか？

「ページをブラックの背景で制作したい」のに
body内の大概をdivで括って、そのdivに background-color:#FAFAFA; とか指定してるのは何故でしょうか・・・・。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
一部分だけを背景:#FAFAFAにしたかったのですが、いろいろ試しまして解決しました＾＾
お世話になり本当にありがとうございました。

通報する

お礼日時：2007/02/23 13:54

No.3

回答者： noname#56851
回答日時：2007/02/22 02:47

試してみたところ#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">

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

補足日時：2007/02/22 12:57

通報する

- 0
- 件

通報する

No.1

回答者： quads
回答日時：2007/02/22 01:31

関係する要素までの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>