css - 图像区域不需要的填充

Question

http://www.milknhny.co.uk/blog/

我已经将我的图像包装在一个黑盒子中，使用以下 css 代码：

.thumbnailwrap {
background: #000000;
display: table;
}

由于某种原因，图像底部有一个非常小的黑色区域，我看不到填充的来源。

请问我可以在哪里看吗？谢谢

Answer 1

为您的图像创建规则，例如：

.thumbnailwrap img {
    vertical-align:top;
}

Answer 2

如果您检查元素，您会注意到黑线来自

.thumbnailwrap { background: #000}

在你的 CSS 中更改它，你应该很高兴！

Answer 3

如果你不需要背景属性。

   .thumbnailwrap {
    background: #000000; --> Remove this from your CSS. I tested and it works
    display: table;
    }

Answer 4

内联元素（或可能内联显示的元素，例如表格、内联块、图像等）始终相对于基线对齐。这是在这句话中穿过字母底部的线。有时，字母可能会低于基线，例如这个（y，g，p）。出于这个原因，基线和底线是不一样的——否则字母的尾部会与下面的头部相撞。

这就是为什么以这种方式在图像下方会有一个小间隙的原因。

就个人而言，我喜欢添加img{vertical-align:bottom}到我的 CSS 中。我总是可以针对特定图像（例如middle有用的地方）覆盖它，这会使图像与底线对齐。