<a> taller than its <img/> child</a>

Question

正如您所见，here横幅图片具有一定的高度（响应），但它有一个叠加层（#vignette），它与横幅图像一起嵌套在a-tag中。 #vignette从其父级获得高度：

#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;
}

a-tag将其高度调整为其内容：

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

那么a-tag有可能比图像本身更高？似乎无法解决这个问题。感谢。

Answer 1

确保img显示为块元素。

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

正如@Ianzz所说，这是因为所有内联元素的下行空间都存在问题。