在页眉和页面内容之间创建一个透明的间隙答案

【问题标题】：Creating a transparent gap between header and page content在页眉和页面内容之间创建一个透明的间隙
【发布时间】：2014-01-18 08:29:39
【问题描述】：

我正在使用 Wordpress 和第二十三主题。我想要实现的是在页眉和页面内容之间创建一个 30px 的间隙。这是一个包含我正在谈论的内容的网页：http://wp-themes.com/elisium/

当我添加边距或填充时，它只会添加一些空白而不是显示背景图片。我在上面提到的网站上尝试了一些逆向工程，似乎差距是由<div class="clearbig"> 造成的。我查看了它的 CSS 代码，但没有多大帮助：

.clearbig {
    clear:both;
    height:10px;
}

为了避免在这里复制大量代码，我建立了一个网站进行测试：

http://mywptestsite.is-great.org

那么你如何创造这个差距呢？

【问题讨论】：

标签： html css wordpress

【解决方案1】：

尝试从 .site 类中删除 background-color: #fff 并将其 (background-color: #fff) 添加到 .site-main 类中

【讨论】：

【解决方案2】：

这是因为您将所有内容包装在具有白色背景的#page 中。您需要做的是从div 中取出您的标题，然后您可以创建所需的空间。你必须这样做：

<header id="masthead" class="site-header" role="banner">
    //stuff in here
</header>
<div id="page" class="hfeed site">
    //rest of your content
</div>

您还必须在 header 上设置宽度，因为它不会被保存在该容器内。这样在左右边距设置auto 将使您的内容居中。

【讨论】：