html - margin 不透明

Question

我有一个 header .我里面还有一个 <div>具有重复的背景图像。我希望在顶部和底部留出 60 像素的边距，以显示 <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

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

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

Example Here

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

看看this older answer我的更长时间的解释和更多的解决方法。