HTML 5 strange img always adds 3px margin at bottom
css, html
Solution
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/
Problem
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/