div标签之间出现意外的空白

Question

我想知道为什么我在两个div标签之间得到一个空格。这是HTML代码：

<div id="header">
    <img id="background" src="http://farm3.staticflickr.com/2847/11154210265_a8854fe5c5_h.jpg" alt="background" />
</div>          
<div id="menu">
    Why the above blank space?
</div>

CSS：

* {
margin: 0px;
padding: 0px;
}
#background {
max-width:100%;
max-height: 550px;
}
#menu {
background: rgb(170,200,189);
}

您可以在此处查看此行为：JSFIDDLE

Answer 1

这是图片标签。

使图像成为块元素，它将解决问题。

#background { display: block }

Answer 2

vertical-align的初始值为baseline。因此，img在基线处对齐并在下方留下一个小空间。

除了display: block @WillemLabu建议之外，您还有其他选择来解决此问题。如果您没有任何文字，可以在font-size

上设置header

#header {
    font-size: 0;
}

JSFiddle

或适当调整vertical-align，当然

#background {
    vertical-align: bottom;
}

JSFiddle