<figure>添加不需要的边距/填充

Question

我一直在尝试使用<figure> - 元素。到目前为止这么好，希望它会让我的网站更多SEO。

但是！有一个东西，它增加了额外的边距/填充（尽管它们都被设置为margin:0; padding:0;）。这不是<figcaption>，因为它位于<img>内的<figure>之上。

任何人都可以解释我如何解决这个问题吗？经过一些研究后，我知道如果用常规<figure>替换<div>，它会表现正常。但是根本不需要<figure> - 元素。

要求它的人的小小提琴：https://jsfiddle.net/jn2geLmy/1/

Answer 1

您应该像figure一样将图像设置为block，如下所示：

 display: block;

删除不需要的保证金。见fiddle

Answer 2

在图中添加display:block。

Fiddle