Why Do Images in HTML5 DIVs Have a 3px Bottom Margin, and How Can I Fix It?

Fixing Unexplained Margin Issue with Images in HTML5

In HTML5, users have encountered an unexpected issue where images enclosed within DIV elements gain an unexplained 3px bottom margin despite the absence of CSS definitions causing it. This issue has been observed even when the height and width of the image and the DIV are both set to 50px.

To resolve this anomaly, the issue can be traced to the image behaving like a character in text, creating a space below it for hanging characters like "y" or "g." The solution lies in utilizing the vertical-align CSS property to indicate that no such space is necessary. Any value for vertical-align will suffice, with "middle" being a popular choice.

Implementing this fix in CSS:

img {
    vertical-align: middle;
}

By incorporating this code, the images will lose the unwanted bottom margin, resulting in the expected behavior. For a practical demonstration, refer to this updated jsFiddle: http://jsfiddle.net/fRpK6/1/.

The above is the detailed content of Why Do Images in HTML5 DIVs Have a 3px Bottom Margin, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!