为什么我的DIV会延伸到我的图像下方，即使它们的高度相同？

Question

我正在尝试同时格式化DIV和其中的图像。

这是我的CSS：

#masthead { width:100% ;
    height:auto ;
    max-height:350px ;
    background:navy ;
    text-align:center ;
    overflow:hidden ;
}

#masthead img { width:100% ;
    max-width:300px ;
    height:auto ;
    margin:0 auto ;
}

和我的HTML：

<div id="masthead">
    <img src="http://i.imgur.com/K9aZKGI.png" />
</div>

图像宽300像素，高350像素 - 与DIV高度相同。那么为什么DIV会比图像低3或4像素？

这是Jsfiddle：http://jsfiddle.net/m9sqn7hh/1/

它让我疯了。任何帮助表示赞赏：）

最佳，

辛西娅

Answer 1

img应该是vertical-align:bottom;或top，否则它下面会有空格