Why Does an Anchor Tag Add Whitespace Below an Image in a Bordered Div?

Anchor Tag Adds White Space Below Image

When an anchor tag encloses an image within a bordered div, an unexpected gap may appear beneath the image. This issue stems from the inline display property of the image, treating it as a character positioned on the baseline. The gap accommodates descenders found in typography, like "j" or "g."

To resolve this, adjust the vertical alignment of the image using CSS:

img {
  vertical-align: bottom;
}

This code forces the bottom of the image to align with the baseline, eliminating the white space and restoring the desired design.

The above is the detailed content of Why Does an Anchor Tag Add Whitespace Below an Image in a Bordered Div?. For more information, please follow other related articles on the PHP Chinese website!