CSSの左横に隙間ができてしまいます。

質問

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#menu img {
padding-top:8px;
border:none;
}
#menu ul {
margin:0;
}
#menu ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
display:inline;
float:left;
}

<< HTML >>
<div id="header">
<div id="logo">
<img src="img/logo.gif" width="298" height="59" alt="ロゴ">
</div><!-- /#logo -->

<div id="menu">
<ul>
<li><img src="img/btn_A.gif" width="194" height="51"></li>
<li><img src="img/btn_B.gif" width="140" height="51"></li>
<li><img src="img/btn_C.gif" width="149" height="51"></li>
<li><img src="img/btn_D.gif" width="137" height="51"></li>
</ul>
</div><!-- /#menu -->
</div><!-- /#header -->

回答No.2

ORUKA1951 · ベストアンサー

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで横に並べます。
　この場合
「ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )」
という仕様--ルールのためli間にスペースができます。white-spaceに
normal,pre,nowrap,pre-wrap,pre-lineのいずれを指定しても・・
　そのためHTMLを
<ul><li><img src="img/btn_A.gif" width="194" height="51"></li><li>
<img src="img/btn_B.gif" width="140" height="51"></li><li>
<img src="img/btn_C.gif" width="149" height="51"></li><li><img src="img/btn_D.gif" width="137" height="51"></li></ul>
とかくことになります。

　なお、
#menue ul li{width:23%;position:relative;}
#menue ul li a{display:block;width:100%;height:100%;text-decoration:none;}
#menue ul li img{display:block;width:100%;height:100%;}
とすると、ウィンドウ幅に合わせて伸縮しますから、そもそもの悩みはなくなります。

この場合でも、

お礼

さらにリストの説明もありがとうございます。

最後、文章途切れちゃったみたいですが・・・
解決後もご丁寧に説明いただいたので、ベストアンサーに選ばせてもらいました。

回答No.1

outbrave

#menu ul {
margin:0;
padding:0;
}

padding:0; の追加で横並びにはなります。

お礼

早速のご回答ありがとうございます。
この回答を見る前に自己解決してしまいました。
いままで、"画像に余白が入る"というワードで検索してましたが、
"listに余白が入る"というワードで検索するとヒットしました。
li の部分にあったmargin、padding、list-style-typeをulに移しました。

#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display:inline;
float:left;
}