Nie*_*sol 70
图像(和一般的内联块元素)被视为字符.
因此,他们遵守基线规则.
在普通文本中,基线是大多数字母底部的线,例如在这个句子中.
但一些字母,如p,q,j等,有降低于基线的尾巴.为了防止这些尾部与下一行的字母发生碰撞,在基线和底线之间保留了空间.
此图说明了文本使用的不同行:
(图片来自WHATWG)
因此,即使没有文本,图像也会与基线对齐.幸运的是,修复非常简单:
img {vertical-align:bottom}
这将使图像与线条的底部对齐,同时移除神秘空间.
请注意,如果您的图像很小(小于线条高度),您可能会开始看到图像上方出现的神秘空间.要解决此问题,请添加line-height:1px到容器元素.
希望这有助于我见过的许多人对此问题以及类似的问题!