为什么我的图片下方有空白空间？
为什么我的图片下方有空白空间？
即使应用了padding:0;margin:0，图片下方会出现一个神秘的空白区域。
红色边框应该贴合图片，但底部有空白。
是什么原因导致这样，我应该如何去除这个空白区域？
为什么我的图片下方有空白？
图片（以及一般的行内块元素）被视为字符。因此，它们遵循基线的规则。在正常的文本中，基线是大多数字母底部的线，就像这个句子中的一样。但是一些字母，比如p、q、j等，有一些尾巴会延伸到基线以下。为了防止这些尾巴与下一行的字母发生碰撞，会在基线和底部之间保留空间。
下图说明了文本中使用的不同线条：
（图片来自WHATWG）
因此，即使没有文本，图片也会与基线对齐。幸运的是，修复这个问题非常简单：
img {vertical-align:bottom}
这将使图片与行的底部对齐，并且去掉了神秘的空白。
但是要注意，如果你的图片很小（小于行高），你可能会看到图片上方出现神秘的空白。为了修复这个问题，在容器元素中添加`line-height:1px`。
希望这能帮助到我见过的很多人解决类似的问题！感谢大家，这是我第一次写参考答案，有点紧张！更多人需要了解这个问题。
不错。为什么`line-height: 1px`起作用？这是一种hack，有没有稍微合理一些的值可以使用？
理想情况下，使用与图片高度相等的高度。基本上，`1px`使得为文本保留的空间非常小，因此图片将“拉伸”该行，并确保没有多余的空间。
鉴于这个问题将被关闭（3/5票），在重复的问题上重新发布这个答案可能会很好；这个答案比目前已有的其他答案更详细。
虽然还有其他很好的解决方案，但这是最好的解释“为什么”的答案。即使你指定了图片的大小，也会将图片对齐到基线，这意味着（与字体相关的）底部和基线之间的差值会被包含在真实的高度中，而你在样式检查器中永远看不到这个值！
