why is my footer not sitting on the bottom

Question

I don't understand why my footer is sitting slightly above the bottom of my webpage and not directly on the bottom

h6 {
  font-family: Neue Haas Grotesk, sans-serif;
  font-weight: 300;
  font-size: 1.4vw;
  color: white;
  position: relative;
  display: block;
}

.footer {
  position: relative;
  display: inline;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding: 0;
}

<div class="footer">
  <h6>&copy; Alex Burger. All rights reserved<br>Further information can be requested through email.</h6>
</div>

Maybe its because of your (h6) tag, try using another tag like (p, div or span) — Azhy, Jun 08 '18 at 16:49
Possible duplicate of [How to make a footer fixed in the page bottom](https://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom) — Stephen P, Jun 08 '18 at 16:59

score 2 · Answer 1 · answered Jun 08 '18 at 17:07

2

The <h6> tag has a native margin. So your problem will be solved with:

.footer h6 {
  margin-bottom: 10px;
}

Note that setting margin: 0px have not the result that you expect, this will only be solved changing other parts fo your document.

answered Jun 08 '18 at 17:07

Alyson Maia

802
5
14

why is my footer not sitting on the bottom

1 Answers1