div 和锚标记错误之间的异常间隙

Question

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

这是我当前的 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的初始保证金引起的

<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

Answer 2

这里有一些事情在起作用。

由于边距可折叠，您的 <h2> 溢出了父级。将边距设置为 0 以修复它。

<a> 或主要 <div> 需要 display:inline-block 才能不达到 100% 宽度。

最后，不要使用内联样式。使用 <style> 标签或 style.css 并添加一些类和 ID。

a{
  max-width: 280px;
  display: inline-block;
}

img{
  height: 200px;
  width: 280px;
  border-radius: 10px 10px 0 0;
  display: block;
}

h2{
  color: white;
  font-weight: bold;
  text-align: center;
  padding-top: 2px;
  margin: 0;
}

a div{
  background-color: black;
  width: 280px;
  height: 30px;
  border-radius: 0 0 10px 10px;
}

<div>
    <a href="#">
      <img src="https://placeimg.com/280/200/any">
      <div>
        <h2>Bees</h2>
      </div>
    </a>
</div>

div 和锚标记错误之间的异常间隙

Unusual gaps between divs, and anchor tag bug

html

css

tags

anchor