html - HTML5边距/填充

Question

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

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

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

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

Answer 1

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

要修复它试试这个 -演示

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

更新

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

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

img { display: block; }

或者

img { vertical-align: top; }