<a> 比它的 <img> 孩子高

Question

在我的网站上，横幅图像具有一定的高度（响应式），但它有一个叠加层 (#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 正确指出的那样，这是因为所有内联元素的下行空间存在问题。