html - Div 和 anchor 标签之间的随机间距

Question

我正在尝试制作一个带有绿色背景、图像和文本的按钮，所有这些都应该是可点击的，以便将您带到相同的目的地。

我不确定如何执行此操作，但就目前而言，它可以工作。虽然看起来有点困惑，但我使用了同一个类两次，我知道你不应该这样做，但我一直找不到解决方案。

我正在寻找的答案是尽量减少图像和文本之间的空间，同时仍然让所有内容都按上述方式工作。它可能与 div 标签有关，但是当我更改任何内容时，它都不起作用。

.takecoverbutton {
  width: 759px;
  height: auto;
  background-color: green;
  border-radius: 6px;
  text-align: center;
  margin: 0 auto;
}

.takecoverimage {
  padding-top: 6px;
}

.buttonpara {
  font-size: 30px;
  font-family: "Comic Sans MS", cursive;
  color: white;
  text-decoration: none;
}

<div class="takecoverbutton" align="center">
  <a href="takecover.html">
    <div class="takecoverbutton" align="center">
      <div class="takecoverimage">
        <img src="images/takeCoveriCon.jpg">
      </div>
      <p class="buttonpara">1. Take Cover</p>
    </div>
</div>
</a>
</div>

提前致谢!

Answer 1

默认情况下，浏览器会为段落添加一些边距。你需要删除边距。

你的 .buttonpara 有 margin remove margin 添加这个 css margin-top:0px;

.buttonpara {
      font-size: 30px;
      font-family: "Comic Sans MS", cursive;
      color: white;
      text-decoration: none;
      margin-top:0px;
 }

片段

.takecoverbutton {
  width: 759px;
  height: auto;
  background-color: green;
  border-radius: 6px;
  text-align: center;
  margin: 0 auto;
}

.takecoverimage {
  padding-top: 6px;
}

.buttonpara {
  font-size: 30px;
  font-family: "Comic Sans MS", cursive;
  color: white;
  text-decoration: none;
  margin-top:0px;
}

<div class="takecoverbutton" align="center">
  <a href="takecover.html">
    <div class="takecoverbutton" align="center">
      <div class="takecoverimage">
        <img src="images/takeCoveriCon.jpg">
      </div>
      <p class="buttonpara">1. Take Cover</p>
    </div>
</a>
</div>