Question

我有烦恼排队两个div，以便他们坐在同花顺之间没有任何空白。一个div包含一个图像，并且坐在另一个上面，其中包含导航栏。两个div都位于包含div的内部。白色空间不超过几个像素高。在Dreamweaver中进行编码时，只有在浏览器中查看或启动实时视图时才会出现。我的文档的正文有一个0的边距。我已经尝试使包含div的边距为0而没有任何运气。还尝试了填充。也用浮点实验。似乎没有什么工作，它必须是显而易见的东西，但我已经坚持了很长时间..

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;
}

或给你的图像一个显示块

 #banner img{
   display:block;
 }

这将解决您的问题。

Answer 2

尝试使用position：relative;或者位置：绝对的;顶部：numberpx;或者左：whateverpx;对齐CSS框。

Answer 3

#banner img{ display:block; }

是正确的答案。

图像显示＆＃34;内联＆＃34;默认情况下：
http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding#Element_types_and_the_display_property

作为测试，将图像设置为display：block，然后将其更改为显示：inline并观察空白的显示和消失。

如何在实时视图中消除包含div中两个div之间的空间？

HTML：

的CSS：

3 个答案: