css - 包含图像的 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;
}

​</p>

​</p>

Answer 1

将您的图像设置为img { display: block; }. 请下次在此处添加您的代码以防止链接失效，并让我们在这里轻松查看您的代码。

Answer 2

给你的图像一个底部垂直对齐，空间就消失了。

jsFiddle 示例

img {
    vertical-align:bottom;
}

Answer 3

您还可以使用 margin-top 属性来实现这一点

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

PS如果您打算支持相对较旧的浏览器，避免css中的负值总是很好