HTML5 <figure> margin/padding

Question

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

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

我通过写入重置所有边距和填充 * { margin: 0; padding: 0 }

有谁知道如何处理它？请看看这个小提琴:http://jsfiddle.net/74Q98/

Answer 1

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

要解决它,试试这个 - DEMO

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

UPDATE

默认情况下,任何图像呈现为直列(如文本),所以一些额外的空间,下面是所有的文本行有空间(即对q,p等等)

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

img { display: block; }

要么

img { vertical-align: top; }