css - 为什么 margin 在 div 中不起作用？

Question

我正在处理我的第一个视差页面，我在 callmenick 找到了一个简单的例子.

他已将他的 parallax.section 设置为 600px 高。这也是图像的容器。

<section class="module content">
  <div class="container">    
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <div class="test">Test container</div>
    <h1>Rise</h1>
  </div>
</section>

我在 container div 中添加了一个 test div，margin-top: 30px; 我预计它会创建一个 30我的测试 div 和容器 div 之间的 px 边距。相反，它在部分 div 之间创建了一个间隙。这是为什么？

如果我将 overflow: hidden 添加到 container div，我就解决了这个问题。但我仍然不明白为什么边距在其他 div 中不起作用。

您可以 see my fiddle here .

使用的css是这样的:

section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section.module .test{
    margin-top: 40px;
    background-color: #BCEF2F;
}

Answer 1

您看到的是 collapsing margins .要修复它，请将 overflow:auto 添加到您的容器 div:

.container {
    max-width: 960px;
    margin: 0 auto;
    overflow:auto;
}

jsFiddle example