Question

当我的浏览器呈现以下测试用例时，图像下方有一个间隙。根据我对CSS的理解，蓝色框的底部应该触摸红色框的底部。但事实并非如此。为什么呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>foo</title></head>
<body>

 <div style="border: solid blue 2px; padding: 0px;">

  <img alt='' style="border: solid red 2px; margin: 0px;"
   src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" />

 </div>

</body>
</html>

Answer 1

内联元素与基线垂直对齐，而不是包含框的最底部。这是因为文本下方需要少量空间用于下行 - 字母上的尾部如小写“p”。因此，在底部上方有一条短距离的假想线，称为基线，默认情况下内联元素与它垂直对齐。

有两种方法可以解决这个问题。您可以指定图像应垂直对齐到底部，也可以将其设置为块元素，在这种情况下，它不再被视为文本的一部分。

除此之外，Internet Explorer还有一个HTML解析错误，它不会忽略关闭元素后的尾随空格，因此如果您在使用Internet Explorer时遇到问题，可能需要删除此空格。

Answer 2

因为图像是内联的，所以它位于基线上。尝试

vertical-align: bottom;

或者，在IE中，有时如果你在图像周围有空白，你就会得到它。因此，如果删除div和img标记之间的所有空格，则可以解决它。

Answer 3

父line-height: 0;上的

DIV为我解决了这个问题。据推测，这意味着默认的行高不是0.

Answer 4

display: block

图像中的

也可以修复它，但可能会以其他方式破坏它;）

Answer 5

删除标记之前的换行符，以便它直接跟在标记之后，它之间没有空格。

我不知道为什么，但是对于Internet Explorer，这很有用。

Answer 6

父DIV上的

font-size:0;是解决它的另一种棘手方法。

为什么我的图像与其包含的盒子之间存在差距？

6 个答案: