删除带有图像的 HTML 图形标签下的空间

Question

我试图理解为什么删除 HTML 图形标签下方的空间需要一个 hack。

在 Chrome 中，删除默认的“vertical-align:baseline”是有效的，但是当你在 CSS 中添加它时，它不会。我能够想出的唯一技巧是在图像周围添加一个包装 div，然后设置“行高：0”。

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://wellnesscounselingmilwaukee.com/wp-content/uploads/2015/07/4-Nature-Wallpapers-2014-1.jpg">
    </div>
</figure>

任何的想法？这根本没有任何意义。

这是 JSFiddle 的屏幕截图，供无法复制的人使用。我在最新版本的 Chrome 和 Safari 上对此进行了测试。这与 table 完全相同，人们通常为此使用不同的 hack。屏幕截图没有显示我取消选中“line-height: 0;”的部分 顺便说一句，以防万一你想知道。如果您将代码复制并粘贴到 JSFiddle 中，则必须取消选中它才能看到问题。

这是您不必修改的链接。

https://jsfiddle.net/415s3amz/1/

---

更新：

如果您可以选择将图像设置为显示：块；它也将解决这个问题。如果没有，使用 line-height: 0; 这似乎已经根据测试证明，这与图像元素的默认行为有关。但是，取消选中 vertical-align:baseline 仍然没有意义，但添加相同的 CSS 不起作用。

Answer 1

您需要将图像的垂直对齐方式从基线（默认）更改为顶部：

img {
  vertical-align: top
}

jsFiddle 示例 内联元素为文本下行符（行线 g、y、j 下方的字符）留出空间，因此如果您想消除该间隙，则需要更改垂直对齐方式。