Question

我试图在标题（图片+导航栏）和内容部分（导航栏下方的白色框）之间创建间隙。在几个地方使用边距/填充，它确实增加了白框顶部的空间，但是没有创建透明的间隙，我可以看到背景图像。

使用

推送带有id = branding的标头

#branding {
   margin-top: 30px;
}

到底部，因此它会在页面顶部创建间隙。当我尝试向此CSS添加margin-bottom: 30px;时，它会增加白框顶部的空间。

我正在处理的页面是this。该页面基于模板，因此我不能100％确定我应该在此处插入代码部分！

提前致谢！

Answer 1

如果我了解您的问题，请尝试将包装器的背景颜色设置为透明

.wrapper {
 background-color: transparent;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

然后为标题和内容添加背景颜色，现在您可以在标题或边距顶部添加页边距。

 #branding {
 margin-top: 30px;
 background-color: #f2f2f2;
 }

 .container {
   margin: 5% auto;
   max-width: 978px;
   background-color: #f2f2f2;
}

之后，您可以看到您网站的背景图片。

HTH

Answer 2

要在您的网站上有差距，您必须对CSS进行一些更改。

在.wrapper删除背景。然后在.header-image上添加你的像素值。

.header-image{
  margin-bottom: your pixel value;
}

然后#main放background-color: #fff;并添加padding: 50px 10px 50px;

#main{
  background-color: #fff
  padding: 50px 10px 50px;
}

最后取消.container的宽度。

下次将您的代码放在此处，以便人们无需查看您的网站。

保证金不使用div来创建标题和内容之间的差距

2 个答案: