Why Do My HTML5 Images Have a Mysterious 3px Bottom Margin?

HTML5 Enigma: Images Exhibiting Unexpected Margin

Consider a peculiar issue encountered when converting a website to HTML5. Unexpectedly, every image enclosed within a DIV element exhibited an inexplicable 3px bottom margin, despite the absence of such a margin in the CSS. Despite extensive examination, the cause of this anomaly remained elusive.

The manifestation of this issue became apparent when the image was assigned dimensions of 50x50 pixels, while the containing DIV element (

) was configured with display: table. Interestingly, the height dimension of .placeholder suspiciously increased to 53 pixels.

Solving the Riddle

The resolution to this perplexing behavior lies in understanding the inherent characteristics of images within HTML. By default, images behave akin to text characters, resulting in a reserved space beneath them for the hypothetical "tail" of a letter like "y" or "g." To rectify this issue, the CSS property vertical-align can be employed to indicate the absence of this additional vertical spacing.

Implementation

To eliminate the unwanted bottom margin, simply incorporate the following CSS rule:

img {
    vertical-align: middle;
}

By specifying a value for vertical-align, the image's vertical alignment within its parent element is adjusted, effectively neutralizing the reserved space.

Visual Verification

This solution is elegantly demonstrated in the updated jsFiddle: [link provided].

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