Css 在页脚上方和下方添加空格

我已经在谷歌上搜索并尝试了我找到的每一个代码，但都不起作用。唯一将页脚与内容分开的是

我的内容和页脚之间需要空间。我正在使用wordpress本地主机，因此无法提供小提琴链接。但这是一幅它现在的样子：

我需要它看起来像这样：

CSS

}

HTML

---

尝试在网站页脚中添加这两个css属性，尝试将像素顶部大小更改为所需的间距

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

---

假设您有2个div wrap，比如div 1是顶部白色区域，而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
...............

---

正常情况下，这足以在两个div内容区和间隔区之间留出空间。确保你没有给包装上bg颜色

不可能创建一个橙色的页脚，然后将文本放入一个白色背景的文本框中。应该得到同样的影响吗？这有帮助吗？如果背景是橙色的，这可能是一种方式，但背景有一个打印（较浅的橙色鸟形打印），因此它看起来不太好。你的CSS中的页面不应该是主页面，或者你正在应用什么CSS？不，但页脚下的间距有效，但不应该超过它。这确实有效！但是去掉了负号。但是页脚下的空间不在这里显示屏幕截图，是的，尝试将顶部从+size更改为-size。尝试margin-bottom css属性显示页脚下的空间当其-size位于顶部时，页脚下有空间，但页脚上没有空间。当顶部有+size时，顶部有空间，但页脚下没有空间保留-size和add margin bottom:10px。。看看发生了什么

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

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