在页脚上方和下方添加空间答案

【问题标题】：Add space over and under footer在页脚上方和下方添加空间
【发布时间】：2014-10-16 02:21:04
【问题描述】：

我已经用谷歌搜索并尝试了我找到的所有代码，但它没有工作。唯一将页脚与内容分开的是<div id="spacer"> 我的内容和页脚之间需要空间。我正在使用 wordpress localhost，所以不能提供小提琴链接。但这是现在的样子： http://tinypic.com/r/rcsi10/8

我需要它看起来像这样：

http://tinypic.com/r/hriwic/8

CSS

#page {
  background: white;
  width: 1020px;
  margin: 10px auto;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.site-footer {
  clear: both;
  padding: 40px 40px;
  color: #000;
text-align: center;
background: #fff;
padding: 10px;



font-size: 11px;
margin-top: 15px;
}

#spacer {
height: 20px;
width: 1020px;
margin-top: 15px;

}

HTML

<div id="main" class="site-main">
<div id="spacer">
<footer id="colophon" class="site-footer" role="contentinfo">
</div>

【问题讨论】：

难道不能创建一个橙色的页脚，然后将文本放在一个白色背景的文本框中。应该得到同样的效果吗？
这有用吗？ jsfiddle.net/0gjkj0uL
如果背景只是橙色，这可能是一种方式，但背景有印花（较浅的橙色鸟印花），所以看起来不太好
在你的CSS中#page不应该是#main，或者你在#main应用什么CSS？
@Linial 否，但页脚下的间距有效，但没有超过它

标签： css wordpress footer

【解决方案1】：

尝试在 .site-footer 中添加这两个 css 属性，尝试将顶部大小（以像素为单位）更改为所需的间隙

.site-footer{
position:relative;
top:-20px;
}

【讨论】：

确实有效！但删除了减号。但是页脚下的空间不存在
显示屏幕截图，是的，尝试将顶部从 +size 更改为 -size。
尝试 margin-bottom css 属性以显示页脚下的空间
当它的 -size 在顶部时，我在页脚下方有空间，但在页脚上方没有空间。当我在顶部有 +size 时，我在顶部有空间，但在页脚下没有空间
保持 -size 并添加 margin-bottom:10px; ..看看发生了什么

【解决方案2】：

假设您有 2 个 div 换行，例如 div 1 是顶部的白色区域，而是底部的页脚。像这样的东西。

//just an imaginary div 
<div class="contentarea">
 ...............
</div>
<div style="clear:both"></div>   

<div id="spacer" style="margin-top:10px;">
   <footer id="colophon" class="site-footer" role="contentinfo"></footer>
</div>

正常情况下，这足以在两个 div 内容区域和 spacer 之间留出一个空间。确保您没有为包装器提供 bg 颜色。

【讨论】：