html - 如何摆脱 'subscribe to our newsletter' 部分上方的空白

Question

我想去掉“订阅我们的时事通讯”部分和“负担得起的专业网页设计”部分之间的空白。

我已经尝试将“经济实惠的专业网页设计”部分底部的边距设置为 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 元素有一个默认的 margin-bottom即使此部分设置了 min-height，也会在该部分之外呈现。您可能会注意到这不会在所有浏览器中发生(在 Firefox 上您不会看到这种差距)。

要解决此问题，只需删除该边距即可:

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

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