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 有边距删除边距添加此 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>

Answer 2

使用 <div></div> 而不是 <p></p>

.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>
      <div class="buttonpara">1. Take Cover</div>
    </div>
  </a>
</div>

Answer 3

那是因为你的 p 标签上有边距

Answer 4

在您的 .paratext 中，只需将边距设置为零：margin: 0;

就是这样 - 你快到了:)

默认情况下，浏览器会为某些元素添加一些样式，包括 p 标签的边距。您可以覆盖它，或者只使用跨度。

（我已经为你整理了代码，见下文）

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

.take-cover-image {
  margin-top: 6px;
}

.take-cover-text {
  font-size: 30px;
  font-family: "Comic Sans MS", cursive;
  color: white;
  margin: 0;
}

<div class="take-cover-button">
  <a href="takecover.html">
        <img class="take-cover-image" src="http://placehold.it/100x50">
        <p class="take-cover-text">1. Take Cover</p>
    </a>
</div>

我实施的更改是：

• 修复了不正确的嵌套
• 更清晰的类名
• 删除了过时的 html 属性（如 align）
• 删除了不必要的额外 div

应该使您的代码更易于管理和调试。

为了将来参考，当您尝试调试类似的东西时 - 尝试使用浏览器开发工具 F12。您可以使用检查器准确查看导致间距问题的元素，并从浏览器调整填充、边距或任何其他 CSS 属性。