スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。

解決済

質問者：unagitokyo
質問日時：2008/08/31 18:42
回答数：2件

スタイルシートで、
*｛
padding:0;
margin:0;
｝
img{
padding:0;
margin:0;
}

と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？

ソースは下記の通りです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<META http-equiv=Content-Type content="text/html; charset=Shift_JIS">

<META
content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建,
name=keywords>
<title>株式会社</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wapper">
<div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div>
<div id="sidememu">
<table width="150" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td>
<tr>
<td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td>
<tr>
<td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td>
<tr>
<td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td>
<tr>
<td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td>
</tr>
</table>
</div>
<div id="main">
<div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div>
<div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div>
</div>
</div>
</body>
</html>

cssは、
/* CSS Document */

*{
padding:0;
margin:0;

}

img{
padding:0;
margin:0;
}

body{
margin-left:auto;
margin-right:auto;
text-align:center;

}

#wapper{
width:820;
}

#head{
margin-top:20px;
text-align:left;
border-bottom:2px #000099 solid;
}

#sidememu{
margin-top:20px;
background-color:#F00;
float:left;
}

#main{
margin-left:10px;
margin-top:20px;
float:right;

}
です。すみません。教えてください！

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： abril
回答日時：2008/09/01 23:48

> 半角スペースを隠すために、コメントアウトしたんですけど、ダメみたいで・・・

「半角スペースを隠すために、コメントアウトした」のはどこの部分の事ですか？私がANo.1で「ここでしょうか？」とおたずねした部分は、補足のソースを見てもそのまま（半角スペースがコメントアウトされていない）になっていますので、そもそも「へんなスペース」が入っている（いた）のは、「そこ」の事ではなかったのですね？

> 最初のtableだと、img{vertical-align:top;}を入れたら直ったんですけどね

…と仰っているところを見ると、「へんなスペース」が入っていたのは<td>内の事で、各メニュー画像が「上下に隙間無くぴったりくっつかなかった」という事だったのでしょうか？

検証する為には、質問者様の抱えている状況を正確に把握する必要がありますので、以下の点を明確にして頂きたく思います。

・今度のソースで、「へんなスペース」が入っているのはどの部分ですか？具体的に示して下さい。
・「へんなスペース」が入って見えるのを確認したのはどの環境（ブラウザの種類とヴァージョン）においてですか？
・memu_back1.gifの縦横サイズを教えて下さい。
・実際に使用されているCSSに提供された部分以外の設定があったり、問題のHTMLファイルから別のCSSを併せて参照したりはしていませんね？

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
firefoxでは、大丈夫だったんですけど、IE6でliの所で空きができてしまってたんです。結局ですね、liに、floatをかけ、ulと親divに、widthを指定した所、直りました。アドバイス有難うございました！

通報する

お礼日時：2008/09/02 22:13

No.1

回答者： abril
回答日時：2008/09/01 14:51

> なぜか画像でへんなスペースが入ってしまいます。

どうしてでしょうか？

「へんなスペースが入」るのは、具体的にどの部分ですか？もしかして：

<div id="flash-a">～</div>と<div id="main-1">～</div>

の上下の間にですか？もしそうであれば、それぞれの<div>と子要素である<img>の間に、半角スペースが入っている為かと思われます。
試しに質問者様ご提供のソースをそっくりコピーして再現してみましたところ、IE6/7上では<div id="flash-a">～</div>と<div id="main-1">～</div>の間に1～2pxほどの隙間ができる様ですので、半角スペースを削除するとぴったりくっつきました。
※FirefoxやOpera等では、元より隙間はできていません。

ちなみに、現状のCSSだと、IE以外の環境ではコンテンツ全体が画面に対して水平方向にセンタリングしませんが、それはご了承の上の事でしょうか？
また、子要素の#sidememuと#mainがfloatしている為、親要素の#wapperが高さを失っていますので、それに対する対策を施しておかないとIE以外の環境だと何かと不都合が出てきますが…

この回答への補足

有難うございます。あのですね、
やりなおしまして、
ソースは、
<body>
<div id="wapper">
<div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" alt=""></div>
<div id="sidemenu"><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><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><li><a href="#">事業内容</a></li></ul></div>
<div id="main">
<div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div>
<div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div>
</div>
<div id="footer">
</div>
</div>
</body>

CSSは、
*{
padding:0;
margin:0;

}

img{
padding:0;
margin:0;
vertical-align:top;
}

body{
margin-left:auto;
margin-right:auto;
text-align:center;

}

#wapper{
width:820px;
}

#head{
margin-top:20px;
text-align:left;
border-bottom:2px #000099 solid;
}

#sidemenu{
margin-top:20px;
float:left;
}

#sidemenu ul{

list-style:none;
background:#FF0000;

}

#sidemenu li{
font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:10px;
background-image:url(../img/memu_back1.gif) ;
background-position:-113px 0px;
width:103px;
height:18px;
text-align:left;
padding-left:10px;
padding-top:10px;
overflow:hidden;
margin:0;

}

#sidemenu li a{
color:#FFFFFF;
text-decoration:none;

}

#main{
margin-left:10px;
margin-top:20px;
float:right;
width:650px;

}

#footer{
clear:both;
}

にしたんですが、やっぱり、ダメなんです。。。半角スペースを隠すために、コメントアウトしたんですけど、ダメみたいで・・・
wapperの件は、clear:bothを入れたので、大丈夫になったんですけど。。。どうしてでしょう？？
ちなみに、最初のtableだと、img{vertical-align:top;}を入れたら直ったんですけどね・・・すみません。アドバイス下さい。よろしくお願いします。