Why Do HTML5 Images in DIVs Sometimes Have a Mysterious 3px Bottom Margin?

Understanding the Mysterious 3px Margin in HTML5 Images

Several users have encountered an unexpected phenomenon where images within DIV elements exhibit a peculiar 3px bottom margin despite the absence of any explicit CSS margins. To delve deeper into this anomaly, let's explore the provided code snippet:

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

When assigning a display: table style to .placeholder, the added height (53px instead of 50px) suggests that the image is behaving like a character in a text string, leaving a space below for a hanging letter like "y" or "g."

To resolve this issue, the CSS property vertical-align can be employed to indicate that no such space is necessary. As demonstrated in the provided code block, setting vertical-align: middle aligns the image vertically without leaving any additional whitespace.

Here's the revised code with the solution implemented:

img {
    vertical-align: middle;
}

By applying this adjustment, the images will align properly within the DIV element, eliminating the puzzling 3px margin. Users can refer to the appended jsFiddle link for a working example:

http://jsfiddle.net/fRpK6/1/

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