似乎HTML5元素图形在其中有图像时会添加一些边距/填充.如果在图形周围添加边框,则可以在元素内部看到一个小填充.
<figure>
<img src="image" alt="" />
</figure>
我通过编写* {margin：0;来重置CSS的所有边距和填充.填充：0}
有谁知道如何处理它？请看一下这个小提琴：http://jsfiddle.net/74Q98/
解决方法
这不是< figure> bug – 这是< img>的正常行为元件
要修复它,试试这个 – DEMO
img {
border: 1px solid green;
display: block;
vertical-align: top;
}
UPDATE
默认情况下,任何图像呈现为内联(如文本),因此下面的小额外空间是所有文本行所具有的空间(即q,p等)
上述答案结合了两种解决问题的方法.所以基本上你只能使用其中一个：
img { display: block; }
要么
img { vertical-align: top; }