为什么divs内部的保证金不起作用？

Question

我正在写我的第一个视差页面，我在[医]愈伤上找到了一个简单的例子。

他把他的parallax.section设为600便士。这也是图像的容器。

<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>

我使用test在container div中添加了一个margin-top: 30px; div，我预计它会在我的测试div和容器div之间创建一个30 px的裕度。相反，它在div节之间创建了一个空白。为什么会这样呢？

如果我将overflow: hidden添加到container div中，就可以解决这个问题。但我仍然不明白为什么其他div内部的利润率不起作用。

你可以看我的小提琴。

所使用的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

你在看塌陷边缘。要修复它，请将overflow:auto添加到容器div中：

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

jsFiddle实例