Margin 不适用于 div 以在标题和内容之间创建间隙答案

【问题标题】：Margin not working on div to create gap between header and contentMargin 不适用于 div 以在标题和内容之间创建间隙
【发布时间】：2015-05-29 15:17:44
【问题描述】：

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

带有 id=branding 的标头被推送

#branding {
   margin-top: 30px;
}

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

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

提前致谢！

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Short, Self Contained, Correct Example (SSCCE) 将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！

标签： html css wordpress

【解决方案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

【讨论】：

【解决方案2】：

如果您的网站存在差距，您必须对 CSS 进行一些更改。

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

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

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

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

终于把.container的宽度去掉了。

下次把你的代码放在这里，这样人们就不必去看看你的网站了。

【讨论】：