<a> taller than its <img> child

Question

On my website a banner image has a certain height (responsive) but it has an overlay (#vignette) which is nested inside an a-tag together with the banner image. #vignette gets its height from its parent:

#vignette  {
    box-shadow: inset 0 0 50px 4px rgba(0,0,0,0.35), inset 0 10px 10px rgba(0,0,0,0.05);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

And the a-tag adjust its height to its content:

a#banner-image {
    display: block;
    position: relative;
    width: auto;
    height: auto;
}

How then is it possible that the a-tag is taller than the image itself? Can't seem to solve this. Thanks.

Answer 1

Ensure the img is displayed as a block element.

a#banner-image img {
    display: block;
}

As @Ianzz correctly states, this is because of an issue with descender space for all inline elements.