删除带有图像的 HTML 图标记下的空间答案

【问题标题】：Removing Space Under HTML Figure Tag with Image删除带有图像的 HTML 图标记下的空间
【发布时间】：2017-02-23 01:27:36
【问题描述】：

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

在 Chrome 中，删除默认的“vertical-align:baseline”是可行的，但是当你在 CSS 中添加它时，它就不行了。我能想出使它工作的唯一技巧是在图像周围添加一个包装器 div，然后设置“line-height: 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/

更新：

如果您可以选择设置要显示的图像：block;它也将解决问题。如果没有，请使用 line-height: 0;根据测试，这似乎证明了这与图像元素的默认行为有关。但是，取消选中垂直对齐：基线仍然没有意义，但添加相同的 CSS 不起作用。

【问题讨论】：

为什么不对figure 元素添加margin: 0;？
请发minimal reproducible example。我发布您的代码时看到的只是jsfiddle.net/xs7jxL60
我添加了一个随机图像，所以现在您可以粘贴到 JSFiddle 上。 “边距：0；”不起作用。
为了证明这一点，我还将添加margin：0并删除figcaption。在 JSFiddle 中执行检查元素，您将在图像下方的图底部看到空间。
margin:0 似乎有效......“html图形标签下方的空格”是什么意思？

标签： html css image figure

【解决方案1】：

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

img {
  vertical-align: top
}

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

【讨论】：

我在尝试了几种方法后得出了同样的结论。这与 display: inline-block 的行为有关。谢谢！
有趣！所以问题来自img 标签（inline-block），而不是figure 标签。

【解决方案2】：

margin:0 应该删除默认边距。 <figure> 标签采用其中 div 的大小，这是一个块级元素，因此在为空时会扩展全宽。见 sn-p...figure 和 div 具有相同的尺寸（容器的宽度，高度 150）

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>

额外的 sn-p 显示 figure 下方没有空格

<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>
<figure style="margin: 0;">
    <div style="line-height: 0;">
        <img src="http://placehold.it/350x150">
    </div>
</figure>

【讨论】：

对不起，我想我不是很清楚。这与宽度无关。问题在于下方的空间。
你当然不会。你有我的黑客在那里。去掉 "line-height: 0" 你就会看到问题了。
@juminoz 我明白了...您应该从问题示例中删除行高。显示您遇到的问题而不是解决方法。或者两者都显示对比。

【解决方案3】：

MDN 的这句话可能有助于澄清一些事情（我将重要部分加粗）：

HTML 元素表示自包含的内容，经常带有标题（），并且通常被引用作为一个单元。虽然它与主流有关，但它的位置独立于主流。通常这是一个图像，一个插图、图表、代码 sn-p 或在正文中引用，但可以移动到另一页或在不影响主流程的情况下添加到附录中。

通常，当项目从正常的布局流中取出时，它们的行为会有所不同（例如使用position: absolute 等），这就是为什么我认为使用margin: 0; 不起作用（至少不适用于所有浏览器）。删除边距似乎在 Firefox 中有效。

当我在 Chrome 中查看代码时，我会看到它的 CSS：

figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

因此，将这些值设置为 0 将删除 Chrome 的边距。

至少现在在IE it seems there is only partial support：

部分支持是指缺少默认样式，从技术上讲 元素被视为“未知”。这很容易由手动设置每个标签的默认显示值。

希望这会有所帮助。 You can see my js.fiddle here.

【讨论】：