HTML 5奇怪的img总是在底部添加3px的空白

一尘不染

html

当我将网站更改为

<!DOCTYPE HTML>

包裹在DIV中的每个img元素都有3px的底边距，即使该边距未在CSS中定义。换句话说，没有样式属性会导致该3px底边距。

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

现在，假设haha.jpg为50x50，.placeholder设置为display：table。奇怪的是，我观察到的.placeholder的高度尺寸是50x53
…

有人以前遇到过这种异常并修复过吗？

编辑

这是JS FIDDLE

阅读 337

2020-05-10

共1个答案

一尘不染

此问题是由于图像的行为类似于文本字符（因此在其下方留有一个空格，“ y”或“ g”的悬挂部分将vertical-align移至该位置）而引起的，并通过使用CSS属性来表示否需要这样的空间。vertical- align意志的几乎任何价值都可以做到；我middle个人很喜欢。

img {
    vertical-align: middle;
}

2020-05-10