CSS 页脚轻微 space 之后

Question

我在删除页脚后的白色 space 时遇到问题。我能够在 chrome 中删除它，设置 - margin-bottom 但这在 Firefox 或 IE 上效果不佳。我不太确定我是否理解为什么白色 space 甚至在那里。

感谢任何帮助。

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

Answer 1

您的页脚当前为 p class，它在页脚上创建了底部边距：

p {
    margin: 0 0 10px;
}

将页脚从段落更改为 div，如下所示：

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

Answer 2

因为bootstrap会在p元素中添加边距，在 .footer-text 中设置 margin-bottom 应该有效

.footer-text {
  padding: 100px 0;
  text-align: center;
  margin-bottom: 0;
}

CSS 页脚轻微 space 之后

CSS Footer slight space after

css

footer