HTML 5 strange img always adds 3px margin at bottom

This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.

img {
    vertical-align: middle;
}

jsFiddle: http://jsfiddle.net/fRpK6/1/

I believe setting

line-height: 1;

on the image will also fix this problem, especially if it's in a block by itself.

I often solve this by giving the image element display:block or display:inline-block as appropriate.

it is solved my problem.

line-height: 0;