Question

我希望标题不会令人困惑。正如您在下面的示例中所看到的，有一个外部div和一个内部div，我将margin-top:100px设置为内部div。在“边距区域”中，默认情况下我们无法看到外部div的背景。但是如果你将overflow：hidden添加到外部div，则会出现背景。有人可以解释为什么会这样吗？

我希望自己能够在这里理解，因为我不是母语为英语的人。

$("button").on("click", function() {
  $(".outer").toggleClass("hidden");
});

div.outer {
  background: red;
  width: 100px;
}
div.outer.hidden {
  overflow: hidden;
}
div.inner {
  margin-top: 100px;
  background: blue;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
  <br>
  <button>toggle</button>
</body>

</html>

Answer 1

我相信这是名为launchpad bug entry的结果。

基本上，没有溢出，浏览器会将内部元素的margin-top与容器的margin-top进行折叠。这是一个糟糕的事情。

当您添加溢出，绝对定位或浮动时，浏览器的折叠效果不会发生。

来自margin collapsing：

这些规则甚至适用于零的边距，因此a的边距第一个/最后一个孩子在其父母之外结束（根据规则以上）父母的保证金是否为零。

Answer 2

“保证金需要反弹。由于父div没有任何反弹，它会反弹在它上方的元素上。”

因此，您应该使用填充而不是边距。或者将外部div的溢出设置为隐藏或自动。

为什么溢出：隐藏影响背景的div的可见性，该div具有带有顶部/底部边距的嵌套div？

2 个答案: