包含图像的div底部的空格

Question

对于这个小提琴，为什么div#imageDiv底部有空格？

JSFiddle

<div>
<div>
<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />      
</div>
</div>
</div>
<div id="text"><div id="inner">text goes here</div></div>        

html {
  line-height: 1.5em;
}
#text {
  background-color: grey;
  margin-top:-7px;
}

Answer 1

将图片设为img { display: block; }。并请下次在此处添加您的代码以防止链接损坏，并让我们在此处轻松查看您的代码。

Answer 2

将图像底部垂直对齐，空间消失。

<强> jsFiddle example

img {
    vertical-align:bottom;
}

Answer 3

你也可以使用margin-top属性来实现这个目标

http://jsfiddle.net/meetravi/7Knyx/14/

P.S如果您计划支持相对较旧的浏览器，那么在css中避免负值总是很好的