HTML 5 strange img always adds 3px margin at bottom

Css Problem Overview

When I change my website to

<!DOCTYPE HTML>

Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...

Has anyone encountered this anomaly before and fixed it?

EDIT

Here is the JS FIDDLE

http://jsfiddle.net/fRpK6/

Css Solutions

Solution 1 - Css

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/

Solution 2 - Css

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

Solution 3 - Css

it is solved my problem.

line-height: 0;

Solution 4 - Css

I believe setting

line-height: 1;

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

Solution 5 - Css

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

Solution 6 - Css

For me it was a combination of

font-size: 0px;
line-height: 0;

on the wrapping container that fixed it.

Solution 7 - Css

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

.placeholder {
    font-size: 0px;
}

Solution 8 - Css

maybe it is the problem of the white-space that causes this. so, the methods bellow maybe useful

img {
display: block;

} or

img {
vertical-align: top/middle/...;

}

.placeholder {
font-size: 0;

}

Solution 9 - Css

not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;

http://jsfiddle.net/fRpK6/3/

Solution 10 - Css

It also happens with piled up divs, just add float property. Example:

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

Problematic CSS:

.piledUpDiv{
    width:100%;
    display:inline-block;	
 }

Solution:

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left;	
 }

Solution 11 - Css

In my special case none of the above solutions worked.

I had a wrapping div with display: flex;.

I managed to make this working by adding: align-items: flex-start; to the wrapping div AND to all the images: display: block;.

Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.

Content Type	Original Author	Original Content on Stackoverflow
Question	shiva8	View Question on Stackoverflow
Solution 1 - Css	Brilliand	View Answer on Stackoverflow
Solution 2 - Css	SpliFF	View Answer on Stackoverflow
Solution 3 - Css	oytunyuksel	View Answer on Stackoverflow
Solution 4 - Css	dkeeling	View Answer on Stackoverflow
Solution 5 - Css	Sebachenko	View Answer on Stackoverflow
Solution 6 - Css	leymannx	View Answer on Stackoverflow
Solution 7 - Css	pantryfight	View Answer on Stackoverflow
Solution 8 - Css	arlendp	View Answer on Stackoverflow
Solution 9 - Css	CSS Guy	View Answer on Stackoverflow
Solution 10 - Css	Hubyx	View Answer on Stackoverflow
Solution 11 - Css	Naderio	View Answer on Stackoverflow