html - div 和 anchor 标记错误之间的异常间隙

Question

我试图在图像底部附加一个没有空格的 div。但是，下面的代码并没有按照我的要求进行。除此之外，当悬停在我的 div h2 宽度的任何位置时，会出现点击按钮，表明它可以在此空白处点击。我觉得我已经尝试了所有方法来将黑色 div 和图像附加在一起，并使它们都可以单击，而不会出现故障或仅使用一个 anchor 标记进行窃听。如果您能帮助我，我将不胜感激。

这是我当前的 HTML 代码:

<div style="#">
    <a style="max-width: 280px;" href="#">
        <img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0;">          
        <div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
            <h2 style="color: white; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
        </div>
    </a>
</div>

提前致谢!

Answer 1

使用这个规则，它是由h2的初始 margin 引起的

<div style="max-width: 280px; overflow:hidden;" style="#">
    <a style="max-width: 280px;" href="#">
        <img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0; display: block;">          
        <div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
            <h2 style="color: white; margin:0px; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
        </div>
    </a>
</div>

这是一个fiddle为你