HTML5 <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; }