'How to fix the gap between footer and end of html body?

I added a footer to my page but for some reason there is a gap between the footer and the ending of the body. I am not sure how to fix this issue. I have made many webpages without this issue.

I have included the HTML and CSS from what I have created. I cannot find any issue with the code I have.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 var(--header-height) 0;
}

section {
    margin-top: 3rem;
}

.coloredSection {
    background-color: var(--pale-green);
    color: white;
}
.container {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.grid {
    display: grid;
    gap: 1.5rem;
}
<footer id="contact" class="coloredSection contact">
          <div class="row align-items-center projects container">
          <div>
            <h1>Contact Me</h1>
          </div>
          <div class="contactLinks" id="contacts">
            <a
              id="profile-link"
              href="https://github.com/"
              target="_blank"
              class="btn contactDetails"><i class="fab fa-github"></i> GitHub</a>
            <a
              href="https://twitter.com/"
              target="_blank"
              class="btn contactDetails"><i class="fab fa-twitter"></i> Twitter</a>
            <a
              href="https://www.linkedin.com/in/"
              target="_blank"
              class="btn contactDetails"><i class="fab fa-linkedin"></i> LinkedIn</a>
            <a href="mailto:" 
              class="btn contactDetails"><i class="fas fa-envelope"></i> Email me</a>
          </div>
          <div class="attribution">
            ©2022 | Designed and Coded by Kianna Hendricks
          </div>
        </div>
</footer>
      <!-- End Contact -->
</body>
</html>

Image: screenshot of footer of webpage and gap between footer and end of body

htmlcss


Solution 1:[1]

It seems you have set a margin-bottom for the body:

var(--header-height)

body {
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 var(--header-height) 0; 
}

Change margin to margin:0; and it will work fine.

Solution 2:[2]

I figured out the issue. I accidently added the projects class to the contact row div. After removing it, the gap went away.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Imran Rafiq Rather
Solution 2 Kam

Related Questions