为什么我的图像与其容纳框之间存在间隙？
时间：2020-03-06 14:41:07 来源:igfitidea点击:
当我的浏览器呈现以下测试用例时，图像下方有一个缝隙。根据我对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>
解决方案
因为图像是内联的，所以它位于基线上。尝试
vertical-align: bottom;
或者，有时在IE中，如果图像周围有空格，则会得到空白。因此，如果删除div和img标签之间的所有空白，则可能会解决该问题。
删除标签前面的换行符，以便它直接跟随标签，标签之间没有空格。
我不知道为什么，但是对于Internet Explorer，这行得通。
display: block
在图像中也修复了它，但是可能以其他方式破坏了它；)
父DIV上的line-height：0;为我解决了这个问题。大概这意味着默认的行高不为0。
内联元素垂直对齐到基线，而不是包含框的最底部。这是因为文本的下方需要少量空间，供后代使用，小写字母" p"之类的字母的尾部也是如此。因此，在底部上方有一条短距离的假想线，称为基线，默认情况下，内联元素与其垂直对齐。
有两种方法可以解决此问题。我们可以指定图像应与底部垂直对齐，也可以将其设置为块元素，在这种情况下，它不再被视为文本的一部分。
除此之外，Internet Explorer还有一个HTML解析错误，该错误不会忽略close元素后的尾随空格，因此，如果我们遇到Internet Explorer兼容性问题，可能必须删除此空格。
父DIV上的font-size：0;是另一种解决它的棘手方法。
