Question

似乎html5 figure元素存在错误。我在这里研究了SO，我发现的所有答案似乎都指向img元素是罪魁祸首。但事实并非如此。至少对于我来说。为了测试这一点，我尝试了以下内容。

我为演示目的尽可能简单。

<figure>
    <img src="image.jpg" alt="">
</figure>

如果我将它放在我的页面上，那将产生额外的边距和填充。现在关于SO的大多数答案表明图像是问题，并使用display:block或垂直对齐来解决此问题。所以为了证明（对我自己）我并没有疯狂，我再次做了这个没有图像。

<figure>&nbsp;</figure>

结果呢？额外的边距和填充仍在添加。所以在我看来，figure就是问题所在。我尝试了我的CSS 0边距，0填充和余量仍然添加到figure元素。我想在我的网站上更多地使用它，但直到我弄清楚这种困境才能使用。

Answer 1

似乎webkit为图元素添加了专有边距：

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

我能够通过将webkit边距设置为0来解决问题：

figure {
    display: block;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

这是一个显示结果的小提琴：https://jsfiddle.net/ae5yopmu/

与图元素和边距/填充的严重缺陷。有线索吗？

1 个答案: