HTML 5 strange img always adds 3px margin at bottom [duplicate]

Question

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 often solve this by giving the image element display:block or display:inline-block as appropriate.

it is solved my problem.

line-height: 0;

I believe setting

line-height: 1;

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

apply display: block to the image fix it, i have this issue with images inside floated divs.

I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;

.placeholder {
    font-size: 0px;
}