为什么保证金不在div内部？

I'm working on my first parallax page and I found a simple example over at callmenick.

我正在制作我的第一个视差页面,我在callmenick上找到了一个简单的例子。

He has set his parallax.section to be 600px high. This is also the container for the images.

他将他的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>

I've added a test div inside the container div with margin-top: 30px; I expected that it would create a 30 px margin between my test div and the container div. Instead it creates a gap between the section divs. Why is that?

我在容器div中添加了一个测试div,其中margin-top:30px;我预计它会在我的测试div和容器div之间产生30 px的余量。相反,它会在节div之间产生间隙。这是为什么?

If I add overflow: hidden to the container div, I solve this problem. But I still don't understand why margins don't work inside other divs.

如果我添加overflow:hidden到容器div,我解决了这个问题。但我仍然不明白为什么边距不能在其他div中运行。

You can see my fiddle here.

你可以在这里看到我的小提琴。

The css used is this:

使用的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;
}

1 个解决方案

#1

You're seeing collapsing margins. To fix it add overflow:auto to your container div:

你看到利润率下降。要解决此问题,请向您的容器div添加overflow:auto:

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

jsFiddle example