HTML5 <figure> 边距/内边距

Question

8

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

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

我用CSS重置了所有元素的外边距和内边距，代码如下：* { margin: 0; padding: 0 }。有人知道如何处理吗？请查看这个fiddle： http://jsfiddle.net/74Q98/。

- Jan

它不是局限于 figure：http://jsfiddle.net/74Q98/2/ - Wesley Murch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zoltan Toth · Accepted Answer

这不是 <figure> 元素的问题 - 这是 <img> 元素的正常行为。

要解决此问题，请尝试以下方法 - 演示

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

更新

默认情况下，任何图像都会呈现为内联（就像文本一样），因此在其下方有一点额外的空间，这是所有文本行都有的空间（即用于q，p等）。

上述答案结合了两种解决问题的方法。因此，您可以只使用其中的一种方法：

img { display: block; }

或者

img { vertical-align: top; }