<h3> <h4> 和 <p> 标签之间的空格答案

【问题标题】：White space between <h3> <h4> and <p> tags<h3> <h4> 和 <p> 标签之间的空格
【发布时间】：2018-01-17 07:40:05
【问题描述】：

我的代码在这里很简单，虽然我仍然不知道如何删除每个标签之间的白色间隙。您可以在带有背景颜色的 h3 和 h4 标签之间看到它。如何摆脱这个空间？

.realEstatePricing h3 {
  Background: lightblue;
  height: 40px;
}

.realEstatePricing h4 {
  Background: lightgrey;
}

<section class="realEstatePricing">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3 class="text-center">Photo Package</h3>
        <h4 class="text-center">$99</h4>
        <p>description 1</p>
        <p>description 1</p>
        <p>description 1</p>
        <p>description 1</p>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

在两者上设置：margin: 0

标签： html css twitter-bootstrap-3

【解决方案1】：

作为对其他答案的回应，您可以这样做：

.realEstatePricing h3 {
    background-color: lightblue;
    height: 40px;
    margin-bottom: 0;
}
.realEstatePricing h4 {
    background-color: lightgrey;
    margin-top: 0;
}

这样，您的整体左边距和上边距将保持当前状态。

【讨论】：

【解决方案2】：

您可以通过将它们的边距都添加到 0 来做到这一点

 .realEstatePricing h3 {
   Background: lightblue;
   height: 40px;
   margin:0;
  }
 .realEstatePricing h4 {
   Background: lightgrey;
   margin:0;
  }

<html>
<head>
</head>
<body>

    <section class="realEstatePricing">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h3 class="text-center">Photo Package</h3>
                    <h4 class="text-center">$99</h4>
                    <p>description 1</p>
                    <p>description 1</p>
                    <p>description 1</p>
                    <p>description 1</p>
                </div>
            </div>
        </div>
   </section>
</body>
</html>

【讨论】：