HTML5< figure>边距/填充 [英] HTML5 <figure> margin/padding

问题描述

似乎HTML5元素 figure 添加了一些边框/填充，如果它里面有一个图像。如果在图形周围添加边框，您可以在元素中看到一个小的填充。

It seems that the HTML5 element figure adds some margin/padding if there is an image inside it. If you add a border around the figure you can see a small padding inside the element.

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

我使用CSS重置所有边距和paddings * {margin： 0; padding：0}

I reset all the margins and paddings with CSS by writing * { margin: 0; padding: 0 }

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

Anyone know how to handle it? Please take a look at this fiddle: http://jsfiddle.net/74Q98/

推荐答案

这不是一个< figure> 错误 - 这是< img> 元素

It's not a <figure> bug - it's a normal behavior of the <img> element

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

To fix it try this - DEMO

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

UPDATE

默认情况下，任何图像呈现为内联（像一个文本），所以下面的额外空间是所有文本行的空间（即 q ， p 等）

By default any image rendered as inline (like a text), so the little extra space underneath is the space that all text lines have (i.e. for q, p etc.)

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

The above answer combines 2 methods of fixing the issue. So basically you can use just one of those:

img { display: block; }

或

img { vertical-align: top; }

这篇关于HTML5< figure>边距/填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！