包装DIV的保证金问题

Question

我试图用另一个具有不同背景的div包装一个称为content div。 但是，当对content div使用“ margin-top”时，包装DIV似乎获得了margin-top而不是content div。

码：

<!DOCTYPE html>
<html>
  <head>
  <style>
    html {
        background-color:red;
    }
    #container-top {
        background-color: #ccc;
        overflow: hidden;
        padding-top: 10px;
        border-bottom: 1px solid #000;
        height:30px;
    }

    #container-bottom {
        background-color: #F1F4F2;
    }
    #content {
        margin-top:20px;
    }
    </style>
  </head>
  <body>
      <div id="container-top">
      </div>
      <div id="container-bottom">
          <div id="content">
              Hello
          </div>
      </div>
  </body>
</html>

因此，在示例中，div container-bottom获得了margin-top而不是content div。

我发现，如果我在container-bottom添加一个char，则可以解决此问题。

  <div id="container-bottom">
      **A**
      <div id="content">
          Hello
      </div>

但这当然不是一个好的解决方案...

谢谢，

乔尔

Answer 1

发生的事情称为保证金崩溃 。

如果两个元素的两个边距（仅顶部和底部，而不是右侧或左侧）相触（或者在您的情况下，内部div的顶部边距与外部div的顶部边距），则它们之间的最大值为使用（在您的情况下，max（0，20）= 20），并尽可能远离接触元素（在您的情况下，在容器div之外（最外面的元素））。

要打破此行为，您必须在2个边距之间放置一些内容->容器div顶部的填充将起作用。

#container-bottom {
    background-color: #F1F4F2;
    padding-top: 1px;
}
#content {
    margin-top:19px;
}

其他解决方案（可行，但可能不适合您的需求）：

您只需将20 px的padding-top放在容器div中：

#container-bottom {
    background-color: #F1F4F2;
    padding-top: 20px;
}
#content {
}

有关更多信息，此页面对此进行了很好的解释： Margin Collapsing

Answer 2

您可以尝试在＃container-bottom上添加一个不间断的空间：

<div id="container-bottom">
    &nbsp;
    <div id="content">
        Hello
    </div>
</div>

这是一个合适的解决方案，因为它通常用于使浏览器知道元素不为空（某些浏览器会忽略空元素）。

Answer 3

由于其折叠特性，顶缘是一种神秘的生物。 我发现此问题最简单的解决方法是将1px padding-top应用于容器底部div并将内容margin-top更改为19px。

包装DIV的保证金问题

问题描述

3 个解决方案

解决方案1
5 2011-04-09 17:12:42

其他解决方案（可行，但可能不适合您的需求）：

解决方案2
3 已采纳 2011-04-09 16:44:51

解决方案3
1 2011-04-09 16:36:25

包装DIV的保证金问题

问题描述

3 个解决方案

解决方案1 5 2011-04-09 17:12:42

其他解决方案（可行，但可能不适合您的需求）：

解决方案2 3 已采纳 2011-04-09 16:44:51

解决方案3 1 2011-04-09 16:36:25

解决方案1
5 2011-04-09 17:12:42

解决方案2
3 已采纳 2011-04-09 16:44:51

解决方案3
1 2011-04-09 16:36:25