<figure>增加了不必要的边距/填充

Question

我一直在尝试使用<figure> -element。到目前为止这么好，希望它会让我的网站更多的搜索引擎优化。

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

任何人都可以解释我如何解决这个问题吗？经过一番研究后，我知道如果用常规的<div>代替<figure>，它的行为会正常。但是，根本不需要<figure> -element。

，一种在要求它的那些小小提琴：https://jsfiddle.net/jn2geLmy/1/

Answer 1

应设置figure S的内部的相似图片为block像这样：

display: block; 

删除不需要的余量。看到这个fiddle

Answer 2

在图中的图像中添加display:block。

Fiddle