taller than its 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.

exact duplicate of [Why an image inside a div has an extra space below the image?](http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image) — lanzz, Jun 28 '12 at 11:15

score 16 · Accepted Answer · answered Jun 28 '12 at 11:12

16

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.

answered Jun 28 '12 at 11:12

Greg

21,235
17
84
107

1

This is not an issue with adjacent whitespace, but with descender space for all inline elements. – lanzz Jun 28 '12 at 11:12
Thank you! Never though that an img would nót be displayed as block. – Bram Vanroy Jun 28 '12 at 12:49

taller than its child

1 Answers1