文章和页脚之间的额外空间

Question

我不知道为什么内容和页脚之间有一个安静的大空间：jsFiddle

我设置了内容的margin-bottom，padding-bottom，页脚的margin-top和padding-top为零。但为什么它还有空间？

Answer 1

您会看到内容和页脚中p标记之间折叠边距的经典行为。

您可以通过多种方式解决这个问题，例如：

body #container #wrapper {
    margin: 0px 15px 0px 15px;
    padding: 67px 0px 0px 0px;
    background-color: white;
    box-shadow: 0px 0px 10px 5px #969696;
    overflow: auto;
}
body #container footer {
    margin: 0px 15px 0px 15px;
    padding: 0px;
    background-color: greenyellow;
    height: auto;
    overflow: auto;
}

在overflow: auto和footer元素上设置#wrapper。

此外，在页脚上将高度设置为自动，以便为文本留出足够的空间。

http://jsfiddle.net/audetwebdesign/9jMrR/

演示

但是，你的包装器底部有一个盒子阴影，你需要决定你希望它如何工作。如果您希望它可见，则需要为页脚添加上边距。

Answer 2

这是一种不好的方法，但您可以应用margin-top：-10px的css规则来减少内容和页脚标记之间的空间。

footer{
margin-top:-10px
}

Answer 3

您可以添加负边距：

footer { 
    margin-top:-20px;
}