Div＆amp;之间的随机间距锚标签

Question

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

我不确定如何做到这一点，但就目前而言，它确实有效。虽然看起来有点令人困惑，但我两次使用相同的课程，我知道你不应该这样做，但我一直无法找到解决方案。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

提前致谢！

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;
 }

<强>段

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用     <div></div>代替<p></p>

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在您的.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属性。

Answer 4

那是因为你的p标签有一个余量