HTML5 <figure> margin / padding </figure>

Question

如果HTML5元素figure内部有图像，它似乎会添加一些边距/填充。如果在图形周围添加边框，则可以在元素内看到一个小填充。

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

我通过编写* { margin: 0; padding: 0 }

来重置CSS的所有边距和填充

任何人都知道如何处理它？请看一下这个小提琴：http://jsfiddle.net/74Q98/

Answer 1

这不是<figure>错误 - 这是<img>元素的正常行为

要解决此问题，请尝试此操作 - DEMO

img {
    border: 1px solid green;
    display: block;
    vertical-align: top;
}

<强>更新

默认情况下，任何图像呈现为内联（如文本），因此下方的额外空间是所有文本行所具有的空间（即q，p等。

上述答案结合了两种解决问题的方法。所以基本上你只能使用其中一个：

img { display: block; }

或

img { vertical-align: top; }