删除 Space Under HTML Figure Tag with Image

Question

我想了解为什么删除 HTML 图形标签下方的 space 需要破解。

在 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 中，则必须取消选中它才能看到问题。

这是您不必修改的link。

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

更新：

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

Answer 1

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

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

显示 figure

下方没有 space 的其他代码段

<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>

Answer 2

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

img {
  vertical-align: top
}

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

Answer 3

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

The HTML element represents self-contained content, frequently with a caption (), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.

通常，当项目从正常的布局流中取出时，它们的行为会有所不同（比如使用 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：

Partial support refers to missing the default styling, as technically the elements are considered "unknown". This is easily taken care of by manually setting the default display value for each tag.

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

删除 Space Under HTML Figure Tag with Image

Removing Space Under HTML Figure Tag with Image

html

css

image

figure