保证金不透明

Question

我有header。在里面我有另一个<div>带有重复的背景图像。我希望在顶部和底部有60px的边距，以显示<header>中设置的纯色背景颜色，但是，它没有显示背景颜色#2f2f2f它是白色的。我错过了什么？

HTML

  <header>
    <div class="header">
      <h1>Stuff here</h1>
    </div>
  </header>

CSS

header{
    background-color: #2f2f2f;
    width: auto;
    height: auto;
}

.header{
    background: #2f2f2f url("../images/tweed.png") repeat left top;
    margin: 60px 0;
}

Answer 1

您正在观察collapsing margins：

  

8.3.1 Collapsing margins

     

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

一种解决方案是在父元素上设置overflow而不是visible。在这种情况下：

Example Here

header {
    background-color: #2f2f2f;
    width: auto;
    height: auto;
    overflow: auto;
}

请查看我的this older answer以获得更多解决方法以获得更多解决方法。