Html 为什么我的图像下面有空间?
图像下面获得一个神秘的空白,即使Html 为什么我的图像下面有空间?,html,css,image,Html,Css,Image,图像下面获得一个神秘的空白,即使填充:0;边距:应用0 红色边框应该紧靠图像,但底部有空间 这是什么原因造成的?我如何删除此空间?图像(通常是内联块元素)被视为字符 因此,它们遵守基线规则 在普通文本中,基线是大多数字母底部的一条线,如本句中所示 但有些字母,如p、q、j等,其尾部低于基线。为了防止这些尾部与下一行的字母碰撞,基线和底线之间保留了空间 此图说明了文本使用的不同行: (图片来源) 因此,即使没有文本,图像也与基线对齐。幸运的是,解决方法非常简单: img {vertical-
填充:0;边距:应用0
红色边框应该紧靠图像,但底部有空间
这是什么原因造成的?我如何删除此空间?图像(通常是内联块元素)被视为字符
因此,它们遵守基线规则
在普通文本中,基线是大多数字母底部的一条线,如本句中所示
但有些字母,如p
、q
、j
等,其尾部低于基线。为了防止这些尾部与下一行的字母碰撞,基线和底线之间保留了空间
此图说明了文本使用的不同行:
(图片来源)
因此,即使没有文本,图像也与基线对齐。幸运的是,解决方法非常简单:
img {vertical-align:bottom}
这将使图像与线条的底部对齐,同时消除神秘空间
只是要小心,如果你的图像很小(小于线条高度),你可能会看到神秘的空间出现在图像上方。要解决此问题,请向容器元素添加行高:1px
希望这能帮助我见过的许多人询问这个问题和类似的问题 将
img
更改为块级元素
img {
display: block;
}
还将删除图像下方的空间。请查看此CSS
CSS
@谢谢-第一次写参考答案,有点紧张!更多的人需要知道这件事。很好。为什么
行高:1px
起作用?这是一个黑客行为,所以我们可以使用稍微更合理的值吗?理想情况下,使用与图像高度相等的任何高度。基本上,1px
使为文本保留的空间非常小,因此图像将“拉伸”行,并确保没有多余的空间。@Kolink:鉴于这将被关闭(3/5票),最好将此答案重新发布在副本上;这是一个比目前其他答案更详细的答案。虽然还有其他好的答案,但这是最好的解释。“即使没有文本,图像也与基线对齐”意味着即使指定图像大小,真实高度也包括底部和基线之间的(字体相关)增量,这是您在样式检查器中永远看不到的值!但是它会阻止您同时拥有多个图像。问题中的链接显示了包装在div
元素中的img
元素。默认情况下,div
是块级的,因此这本身就可以防止多个div
+img
实例并排显示。如果图像在标记中相邻,则display:inline block
将删除下面的空格并并排显示元素。@Astrotim-这不正确<代码>显示:内联块不会删除下面的空格。@Alohci,我已更正。需要将display:inline block
应用于父div
,将display:block
应用于子img
,以获得删除空格的并排图像。向上投票,因为这确实解决了问题中提出的问题。@NiettheDarkAbsol的上述评论未被列为原始问题中的关注点,也不是该答案被否决的原因。这是否回答了您的问题?
div {border:1px solid red;width:100px;line-height:0}
img {width:100px;}