html - HTML5マージン/パディング

Question

figure内部に画像がある場合、HTML5 要素はいくつかのマージン/パディングを追加するようです。Figure の周りに境界線を追加すると、要素内に小さなパディングが表示されます。

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

CSS ですべてのマージンとパディングをリセットするには、次のように記述します。* { margin: 0; padding: 0 }

誰でもそれを処理する方法を知っていますか? このフィドルを見てください：http://jsfiddle.net/74Q98/

Answer 1

これはバグではなく、要素<figure>の通常の動作です<img>

それを修正するには、これを試してください - DEMO

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

アップデート

デフォルトでは、すべての画像がインライン (テキストなど) としてレンダリングされるため、その下のわずかな余分なスペースは、すべてのテキスト行 (つまりq、pなど)のスペースになります。

上記の回答は、問題を修正する 2 つの方法を組み合わせたものです。したがって、基本的には次のいずれかを使用できます。

img { display: block; }

また

img { vertical-align: top; }