divの間にすき間ができる

質問

入れ子にされたdivとdivの間で隙間ができて困っております。

構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、
入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi">
を表示させるつもりですが、<div id="header2">と<div id="navi">の間に
ブラウザで見たときに隙間ができてしまいます。
どうすれば隙間無く表示させることができるでしょうか？

<div style="clear:both"></div>を入れてみては？と言われましたので
入れてみましたが効果はなく困っております。

【html部】
<div id="header2">
<h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1>
<div class="headnavi">
<ul>
<li id="access"><a href="access/index.html">地図・連絡先</a></li>
<li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
<div id="navi">
<ul>
<li id="aboutus"><a href="about_us/index.html">会社案内</a></li>
<li id="works"><a href="works/index.html">業務紹介</a></li>
<li id="enviro"><a href="enviroment/index.html">環境方針</a></li>
<li id="carrier"><a href="carriers/index.html">採用情報</a></li>
</ul>
</div>

【スタイルシート】
#header2 {
height: 80px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#header2 h1 {
padding-top: 0px;
margin: 0px;
float: left;
padding-bottom: 0px;
padding-left: 14px;
}

#header2 .headnavi {
height: 24px;
margin-right: 14px;
}
#header2 .headnavi ul {
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
float: right;
height: 24px;
}
#header2 .headnavi li {
text-indent: -9999px;
display: inline;
list-style-type: none;
}
#header2 .headnavi li a {
text-decoration: none;
display: block;
height: 24px;
overflow:hidden;
float: left;
}
/*------off----- */
#header2 .headnavi li#access a {
width:124px;
height: 24px;
background-image: url(../images/head_navi.jpg);
background-repeat: no-repeat;
}
#header2 .headnavi li#inquiry a {
width:125px;
height: 24px;
background-image: url(../images/head_navi.jpg);
background-repeat: no-repeat;
background-position: -124px 0px;
}
#header2 .headnavi li#sitemap a {
width:121px;
height: 24px;
background-image: url(../images/head_navi.jpg);
background-repeat: no-repeat;
background-position: -249px 0px;
}
/*------hover------- */
#header2 .headnavi li#access a:hover {
background-image: url(../images/head_navi.jpg);
background-repeat: no-repeat;
background-position: 0px -24px;
}
#header2 .headnavi li#inquiry a:hover {
background-image: url(../images/head_navi.jpg);
background-repeat: no-repeat;
background-position: -124px -24px;
}
#header2 .headnavi li#sitemap a:hover {
background-image: url(../images/head_navi.jpg);
background-repeat: no-repeat;
background-position: -249px -24px;
}

<div style="clear:both"></div>

回答No.1

mazayugi

naviのCSSはないんですか？
とりあえずカテ違いなので技術者のHTMLでもう一度聞いてみてください。

お礼

ありがとうございます。
#navi ulのmargin-top: 0pxを入れることで自分で解決できました。