删除HTML节之间的空白

Question

请在浏览器上呈现页面时，如何删除html部分之间的空白。

<section id="product-overview">
  <h1>Get the freedom you deserve.</h1>
</section>

<footer class="main-footer">
  <nav>
    <ul class="footer-ul__list">
      <li class="footer__link">
        <a href="#">Support</a>
      </li>
      <li class="footer__link">
        <a href="#">Terms of Use</a>
      </li>
    </ul>
  </nav>
</footer>

Answer 1

您使用的两个HTML元素默认情况下具有margin。 h1和ul标签在默认情况下都随附margin-top和margin-bottom。您必须使用重置/规范化样式表，或者记住在您自己的CSS中考虑边距。

#product-overview {
  background: #eee; /* just for demo so you can see the layout better */
}

#product-overview h1 {
  margin: 0;
}

.main-footer {
  background: #ddd; /* just for demo so you can see the layout better */
}

.footer-ul__list {
  margin: 0;
}

<section id="product-overview">
  <h1>Get the freedom you deserve.</h1>
</section>

<footer class="main-footer">
  <nav>
    <ul class="footer-ul__list">
      <li class="footer__link">
        <a href="#">Support</a>
      </li>
      <li class="footer__link">
        <a href="#">Terms of Use</a>
      </li>
    </ul>
  </nav>
</footer>

Answer 2

您可以通过删除边距和填充来减少空白；但是您可以选择

*{
padding:0%;
margin:0%;
}

<section id="product-overview">
  <h1>Get the freedom you deserve.</h1>
</section>

<footer class="main-footer">
  <nav>
    <ul class="footer-ul__list">
      <li class="footer__link">
        <a href="#">Support</a>
      </li>
      <li class="footer__link">
        <a href="#">Terms of Use</a>
      </li>
    </ul>
  </nav>
</footer>

font和background color可以根据需要进行设置