Search code examples
cssfooter

CSS Footer slight space after

I am having an issue in removing the white space after footer. I was able to remove it in chrome setting a - margin-bottom but that doesn't work well with Firefox or IE. I'm not quite sure I understand why the white space is even there.

Any help is appreciated.

<div class="footer">
  <section class="footer-inner">
    <p class="footer-text">Copyright</p>
  </section>
</div>

.footer {
  height: 300px;
}
.footer-inner {
  margin-top: -10px;
  background-color: #E0E6E6;
}
.footer-text {
  padding: 100px 0;
  text-align: center;
}

http://jsfiddle.net/trws2062/ or http://www.johndayers.com/versions/v9/footer_branch/

Solution

  • Your footer is currently a p class, which is creating a bottom margin on the footer:

    p {
    margin: 0 0 10px;
}

    Change the footer from being a paragraph to a div, like so:

    <div class="footer-text">
    Copyright &copy; 2015 etc...
</div>