CODEWITHSUNDEEP
htmlcss
Sambulo Senda
Sambulo Senda

Reputation: 1418

Remove White Spaces Between HTML Sections

Please how do I remove the white spaces in between the html sections when page is rendered on the browser. 

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

Upvotes: 0

Views: 96

Answers (2)

sabeen kanwal
sabeen kanwal

Reputation: 607

you can reduce the white spaces by removing the margins and padding;but choice is yours

*{
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 and background color you can set as per your requirement

Upvotes: 0

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Two of the HTML elements you used have margin by default. Both h1 and ul tags come with margin-top and margin-bottom by default. You must either use a reset/normalize stylesheet or remember to account for the margins in your own 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>

Upvotes: 1

Related Questions