HTML5 <figure> margin/padding

Question

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>

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

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

Answer 1

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

To fix it try this - DEMO

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

UPDATE

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; }

or

img { vertical-align: top; }