HTML 5 strange img always adds 3px margin at bottom
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/
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/
我经常通过给图像元素display:block或display:inline-block来解决这个问题。
它解决了我的问题。
line-height: 0;
上一篇: 保留子元素