为什么我的图片下面有空间？
即使padding:0;margin:0被应用，图像在底下获得一个神秘的空白空间。
示范
红色的边框应该拥抱图像，但底部有空间。
是什么原因造成的，怎样才能删除这个空间？
图像（和一般的内联块元素）被视为一个字符。
因此，他们服从基线的规则。
在正常文本中，基线是大多数字母底部的行，例如在这个句子中。
但是一些字母，比如p ， q ， j等，尾巴会低于基线。 为了防止这些尾巴与下一行的字母碰撞，在基线和底线之间保留空间。
此图说明了文本使用的不同行：
（图片来自WHATWG ，点击查看原图）
因此，即使没有文字，图像也会与基线对齐。 幸运的是，修复非常简单：
img {vertical-align:bottom}
这将使图像与线条的底部对齐，也消除了神秘的空间。
只要小心，如果图像很小（小于线高），您可能会开始看到图像上方出现的神秘空间。 要解决这个问题，请将line-height:1px添加到容器元素。
希望这可以帮助我见过的许多人询问这个问题和类似的问题！
将img更改为块级元素
img { display: block; }
也将删除图像下方的空间。
看看这个CSS jsfiddle CSS
div {border:1px solid red;width:100px;line-height:0} img {width:100px;}
