Why Does My HTML5 Image Have a 3px Bottom Margin Despite No Explicit CSS?

HTML 5 Image Anomaly: Unexplained Bottom Margin Issue

When utilizing HTML 5, users may encounter a perplexing issue where images wrapped within DIV elements exhibit an inexplicable 3px bottom margin. This anomaly persists despite the absence of explicit margin definitions in the CSS. For instance, consider the following HTML structure:

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

With the .placeholder DIV possessing a display: table style, the image's dimensions remain at 50x50px. However, the .placeholder DIV mysteriously expands vertically to 53px. This unexpected behavior has puzzled many developers seeking resolution.

Solution: Vertical Alignment

The root cause of this anomaly lies in the image's treatment as a text character, resulting in an unneeded space below it akin to that occupied by the descenders of letters like "y" or "g." To remedy this, the CSS vertical-align property ensures that no such space is allocated. Virtually any value for vertical-align will suffice, with middle being a popular choice.

img {
    vertical-align: middle;
}

Implementing this solution effectively eliminates the 3px bottom margin and resolves the image display issue. As illustrated in the updated jsFiddle, the image and its surrounding DIV now display their intended dimensions without the peculiar empty space below the image.

The above is the detailed content of Why Does My HTML5 Image Have a 3px Bottom Margin Despite No Explicit CSS?. For more information, please follow other related articles on the PHP Chinese website!