html – Why does my footer have an empty box surrounding it?-ThrowExceptions

Exception or error:

I’m trying to place a footer at the bottom of my page, but wind up with unwanted whitespace at the bottom. How can I correct that? The following is my HTML and CSS:

body{
  min-height:100vh;
  position:relative;
}

.page-wrap{
  padding-bottom:50px;
}


footer{
  position:absolute;
  background-color:red;
  bottom:0;
  width:100%;
  height:50px;
}
  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div class="page-wrap">
        <nav>
          <h2>Header</h2>
        </nav>
        <main>
          <h2>Content</h2>
        </main>
      </div>
      <footer><h2>Footer</h2></footer>
    </body>
    </html>

I’m unsure what is creating it.

How to solve:

Just add below mentioned CSS code. Hope this help you.

footer h2 { margin: 0; }

Leave a Reply

Your email address will not be published. Required fields are marked *