图像区域上的不需要的填充

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），这会将图像与底线对齐。