如何让我的两个文本元素更“粘”在一起[重复]答案

【问题标题】：How to make my two text elements "stick" more together [duplicate]如何让我的两个文本元素更“粘”在一起[重复]
【发布时间】：2022-11-19 06:06:30
【问题描述】：

我正在尝试使用 HTML 和 CSS 重新创建网站的这一部分：我的角色是这样的：元素的大小差异在这里并不重要，但让我感到震惊的是，在第一张图片中，您可以看到标题和段落“粘”在一起。在我的版本中，它们之间有一个空格，我不知道如何删除它。

以下是相关代码行：

.cta {
  background: #3882f6;
  padding: 50px 100px;
  border-radius: 10px;
  border-style: none;
  color: #f9faf8;
}

.cta-container {
  padding: 100px 0;
}

.cta-signup-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cta-signup {
  background: #3882f6;
  border-radius: 8px;
  border-style: none;
  color: #f9faf8;
  width: 120px;
  height: 33px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #f9faf8;
}

<div class="cta-container">
  <div class="cta">
    <div class="cta-wrapper">
      <h3>Call to action! It's time!</h3>
      <div class="cta-signup-wrapper">
        <p>Sign up for our product by clicking that button right over there!</p> <button type="button" class="cta-signup">Sign up</button> </div>
    </div>
  </div>
</div>

我尝试修改该段落，将其删除或以不同方式嵌套 cta-signup-wrapper，但没有成功。

【问题讨论】：

h3 上巨大的顶部和按钮边距

标签： html css flexbox

【解决方案1】：

h3 和 p 元素默认有很多边距（h3 边距在下面以橙色突出显示）：

通过删除 h3 和 p 的边距来解决这个问题：

.cta {
  background: #3882f6;
  padding: 50px 100px;
  border-radius: 10px;
  border-style: none;
  color: #f9faf8;
}

.cta-container {
  padding: 100px 0;
}

.cta-signup-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cta-signup {
  background: #3882f6;
  border-radius: 8px;
  border-style: none;
  color: #f9faf8;
  width: 120px;
  height: 33px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #f9faf8;
}

h3, p {
  margin: 0;
}

<div class="cta-container">
  <div class="cta">
    <div class="cta-wrapper">
      <h3>Call to action! It's time!</h3>
      <div class="cta-signup-wrapper">
        <p>Sign up for our product by clicking that button right over there!</p>
        <button type="button" class="cta-signup">Sign up</button>
      </div>
    </div>
  </div>
</div>

【讨论】：