Javascript jQuery div额外高度，悬停时带有图像标题

我得到一个奇怪的3倍差距的图像和覆盖，似乎覆盖超过3倍的图像高度明智。当我将CSS改为bottom:3px时，它就工作了，但我认为这有点俗气。但是我不知道这个空间是从哪里来的

这就是我使用的代码

HTML

JQUERY

jQuery(document).ready(function($) {
    $('.image-caption').hide();
        $('.image-hover').hover( function() {
        $(this).find('.image-caption').fadeIn(300);
        }, function() {
        $(this).find('.image-caption').fadeOut(300);
    });
});

---

这是因为在图像（新行、制表符等）之后呈现了空白。浏览器尊重他们，这导致了不必要的差距。解决问题的简单方法是在

a

级别上临时将字体大小设置为

0

，然后将其重置为

的原始值。图像标题

：

.image-hover {
    position: relative;
        a,
        a:hover {
            color:white;
        }
}

.image-caption {
    ...
    bottom: 0;
    font-size: 16px;
}

现在您可以设置

底部：0

，不必担心任何奇怪的间隙

---

演示：我使用了你的代码。。我只添加了一个

.image caption

类的边界，这样我们就可以看到覆盖的边界了

我没有发现任何差距之间。。。标题和描述位于图像的中间

.image-caption {
    position: absolute;
    top:0;
    right:0;
    bottom:3px;
    left:0;
    border:1px solid red;  /* this line added */
}

---

请你用小提琴告诉我们，好让人们了解你的问题

尝试更改

底部：3px

到

bottom:0px

您忘记设置

bottom:0px

。这就是问题发生的时候。谢谢，但你们去掉了我真正需要的标签。我真的得到了。非常感谢你的帮助。

.image-hover {
    position: relative;
        a,
        a:hover {
            color:white;
        }
}

.image-caption {
    ...
    bottom: 0;
    font-size: 16px;
}

.image-caption {
    position: absolute;
    top:0;
    right:0;
    bottom:3px;
    left:0;
    border:1px solid red;  /* this line added */
}