Why Is There Unexpected White Space Below My Inline Image Tag?

Mysterious White Space Beneath Image Tag Solved

You've recently modified your website's header image, switching from a CSS background image to an inline image element. While the image now scales as intended, you've encountered an unexpected 10px gap beneath it.

After using Chrome's inspector but failing to identify the cause, you turned to online forums for assistance. One suggested solution is based on the concept of typographic descenders.

Descenders are letters that extend below the baseline in text, such as "j," "g," "p," and "y." By default, inline elements like images follow baseline alignment, which takes into account the space required for descenders.

Solutions:

• Set vertical-align: bottom to the img tag: This aligns the image to the bottom of the container, eliminating the white space.
• Change display: inline to display: block: This converts the img tag to a block-level element, removing its baseline alignment.
• Adjust the container's line-height property: Setting line-height to 0 can eliminate the gap.
• Set a font-size: 0 on the container: This also eliminates baseline alignment but may require restoring the font size on child elements.

The above is the detailed content of Why Is There Unexpected White Space Below My Inline Image Tag?. For more information, please follow other related articles on the PHP Chinese website!