保证金不透明

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

您正在观察折叠边距:

8.3.1折叠边距

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

一种解决方案是设置父元素overflow以外的其他visible元素.在这种情况下:

这里的例子

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

看看我的这个较旧的答案,可以通过更多解决方法获得更长的解释.