HTML5 <figure> margin/padding

Question

看起來HTML5元素figure增加了一些margin/padding，如果裏面有圖像的話。如果在圖形周圍添加邊框，可以在元素內看到一個小填充。

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

我寫* { margin: 0; padding: 0 }

任何人都知道如何處理它重置所有的邊距和補用CSS？請看看這個小提琴：http://jsfiddle.net/74Q98/

Answer 1

這不是一個<figure>錯誤 - 它是<img>元素的正常行爲

要修復它試試這個 - DEMO

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

UPDATE

默認情況下，任何圖像呈現爲內嵌（像文本），所以下面的一點額外空間是所有文本的空間l有（即對於q,p等）

以上答案結合瞭解決問題的兩種方法。因此，基本上可以只使用其中的一個：

img { display: block; } 

或

img { vertical-align: top; }