html - 如何消除实时 View 中包含 div 内的两个 div 之间的空间？

Question

将两个 div 排成一行，使它们齐平，中间没有任何空白，这让我很烦恼。一个 div 包含一个图像并且位于另一个包含导航栏的顶部。两个 div 都位于一个包含 div 的内部。空白不超过几个像素高。在 Dreamweaver 中编码时不会出现，只有在浏览器中查看或启动实时 View 时才会出现。我的文档正文的边距为 0。我曾尝试使包含的 div 的边距为 0，但没有任何运气。也尝试了填充。也尝试了 float 。似乎没有任何效果，它必须是显而易见的，但我已经坚持了很长时间..

HTML:

<div id="header">
<div id="bannner">
<img src="images/banner.jpg" width="900px" height="350px" alt="banner"/>
</div><!--end of banner div-->
<div id="navbar"> 
<div class="hoveringNavBar" id="one">
<img class="icon" src="images/home.png">
<p class="text">Home</p>
</div>

<div class="hoveringNavBar" id="two">
<img class="icon" src="images/mains.png">
<p class="text">Mains</p>
</div>

<div class="hoveringNavBar" id="three">
<img class="icon" src="images/sandwich.png">
<p class="text">Sandwiches</p>
</div>

<div class="hoveringNavBar" id="four">
<img class="icon" src="images/desserts.png">
<p class="text">Desserts</p>
</div>              
</div><!--end of navbar-->
</div><!--end of header-->

CSS:

#header
margin:auto;
height:530px;
width:900px;
background-color:#F8F8F8;

#banner
margin:0px; 

#navbar
margin: 0px;
height: 180px;
width: 900px;
background-color: red;

Answer 1

我会设置横幅 div 的高度。

#banner{
 height:350px;
}

或者给你的图像一个显示 block

 #banner img{
   display:block;
 }

这将解决您的问题。