如何让HTML&CSS中的标题与段落元素紧密贴合？

问题出在浏览器给<h3>和<p>标签设置了默认外边距（margin），这就是两者之间出现空隙的原因。你只需要覆盖这些默认样式就能让它们紧密贴合。

修改方案 #

在你的CSS中添加以下代码，精准移除标题底部和段落顶部的默认外边距：

.cta-wrapper h3 {
  margin-bottom: 0;
}
.cta-signup-wrapper p {
  margin-top: 0;
}

如果想更彻底清零所有外边距，也可以这么写：

.cta-wrapper h3, .cta-signup-wrapper p {
  margin: 0;
}

修改后的完整代码 #

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; 
}
/* 新增的间距重置样式 */
.cta-wrapper h3 {
  margin-bottom: 0;
}
.cta-signup-wrapper p {
  margin-top: 0;
}

HTML部分 #

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

这样修改后，标题和段落就会像参考图里一样紧密贴合了。

内容的提问来源于stack exchange，提问作者Hilow