Question

简单的一个我无法绕过头脑的人。看下面的代码;根据我对盒子模型的理解，#content上的60px边距应该会推动整个.main div，而.main div的边距应该从页面开始60px，但是在实践中，.main边距与#content边距重叠（here's a codepen）

<head>
   <style> 
    #content{
     margin-top:60px;
    }

    .main{
      margin-top:20px;
    }
   </style>
</head>
<body>
  <section id="content">
    <div class="main">
      <h1>Here's some content</h1>
    </div>
  </section>
</body>

为什么会这样？

编辑：有什么建议的解决方案？请注意，将overflow:hidden添加到父元素是一种解决方案，但它不是一个合适的修复方法;如果我在h1内加.main并尝试在其上设置一个上限，则会出现同样的问题 - 而且我不想将overflow:hidden应用于所有内容！

Answer 1

这是因为你可以阅读关于here的边距折叠。

Answer 2

这种情况正在发生，因为您没有指定内容div的高度。因此，当您在#content div中输入类似.main的内容时，内容div将占用.main div的高度，因为这是内容所需要的。

所以为了清楚一点，如果你的.main div占用50px的高度，那么#content的高度也只有50px，因为你没有另外指定。所以.main div的margin-top正在与#content的.margin-top崩溃。

Answer 3

根据w3c（reference）

，这是盒子模型的默认行为

现在要克服这个问题，你需要浮动元素，如下所示

#content {
    margin-top: 20px;
    float: left;
    width: 100%;
}

.main{
    float: left;
    width: 100%;
    margin-top: 40px;
}

CSS：父元素的margin-top不会影响孩子的边缘

3 个答案: