包含图像的div底部的空间[重复]答案

【问题标题】：Space at bottom of div containing image [duplicate]包含图像的div底部的空间[重复]
【发布时间】：2012-08-05 19:43:43
【问题描述】：

对于这个小提琴，为什么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;
}

【问题讨论】：

标签： css

【解决方案1】：

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

jsFiddle example

img {
    vertical-align:bottom;
}

【讨论】：

@PeterVR - 检查您的 CSS 儿子，“vertical-align CSS 属性指定内联或表格单元格元素的垂直对齐方式。”每developer.mozilla.org/en-US/docs/CSS/vertical-align

【解决方案2】：

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

【讨论】：

那么内联元素在块级元素内部时会自动创建一些“填充”吗？我在哪里可以读到这个，我试过谷歌搜索但我没有找到任何相关的东西。谢谢
@jdln 1 秒。我会为您获取规范的链接:)

【解决方案3】：

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

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

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

【讨论】：

我认为这是一个快速且非常肮脏的解决方案，而不是关于问题的方式和方式的实际答案......
是的，我知道它很脏，所以只有我提到它会在旧浏览器中产生很多错误...