如何摆脱“订阅新闻稿”部分上方的空白

Question

我想摆脱“订阅新闻简报”部分和“负担得起的专业Web设计”部分之间的空白。

我已经尝试将“负担得起的专业Web设计”部分的底部页边距设置为0，并将“订阅我们的新闻稿”部分的顶部页边距设置为0，但这似乎不起作用。

这是在浏览器中的样子：

这是我的HTML和CSS文件：

.webdesignbannerdiv {
  min-height: 400px;
  background: blue;
  padding-top: 20px;
  text-align: center;
  color: white;
  margin-bottom: 0px;
}

.webdesignheader {
  margin-top: 100px;
  font-size: 55px;
}

.webdesignparagraph {
  font-size: 20px;
  margin-top: 5px;
}


/*newsletter section*/

.newsletterdiv {
  margin-top: 0px;
  padding: 15px;
  color: white;
  background-color: #35424a;
}

<section id="affordablewebdesignbanner">
  <div class="webdesignbannerdiv">
    <h1 class="webdesignheader">Affordable Professional Web Design</h1>
    <p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
  </div>
</section>

<section id=subscribetonewsletter>
  <div class="newsletterdiv">
    <h1>Subscribe to our newsletter</h1>
    <form>
      <input type="email" placeholder="Enter Email...">
      <button type="submit" class="newsletterbutton">Subscribe</button>
    </form>
  </div>
</section>

这就是我想要的样子：

Answer 1

由于margin-collapsing元素具有默认的p，因此您面临的是 complex margin-bottom，即使该元素具有一个{{1套。您可能会注意到，并非所有浏览器都会发生这种情况（在Firefox上您不会看到此差距）。

要解决此问题，只需删除该边距：

min-height

.webdesignbannerdiv {
  min-height: 400px;
  background: blue;
  padding-top: 20px;
  text-align: center;
  color: white;
  margin-bottom: 0px;
}

.webdesignheader {
  margin-top: 100px;
  font-size: 55px;
}

.webdesignparagraph {
  font-size: 20px;
  margin-top: 5px;
  margin-bottom:0;
}


/*newsletter section*/

.newsletterdiv {
  margin-top: 0px;
  padding: 15px;
  color: white;
  background-color: #35424a;
}