Question

在this fiddle中，我想知道为什么蓝色div不能完全包含孩子，因为边缘位于容器内容器内（即为什么空间为白色）顶部而不是蓝色。）

<div id="container">
  <div id="box"></div>
</div>

...

#container {
  background-color: dodgerblue;
}

#box {
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: wheat;
}

据我所知，这不是collapsing margin问题，因为只有两个边距没有崩溃;只有子框有余量。

注意：我正在寻找为什么。我知道将容器设为Block Formatting Context（演示为here），修复了问题（例如overflow:auto）。

Answer 1

为什么：Collapsing margins并不意味着您需要为父元素定义边距，父元素具有自动边距由浏览器计算并应用于元素。

实际上，是是因为CSS Box模型定义的折叠边距：

在CSS中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成单一的边缘。边距结合这种方式据说会崩溃，并由此产生组合保证金称为折现保证金。

从定义：

内嵌块框的边距不会崩溃（甚至没有它们的流动儿童。）

所以单向是将#box的显示更改为inline-block以避免此行为。

要不触及display类型，另一种方法是使用padding作为间距。

另一种方法是将相同颜色的border添加到#box。如果您执行此操作，请确保box-sizing: border-box; #box（-moz-box-sizing: border-box;用于FireFox或Gecko浏览器）（边框可防止边距折叠）

在评论中提出问题：为什么添加1px填充会阻止边距折叠？

从盒子模型定义：

相邻的垂直边距崩溃。

。。

（两个边距相邻的条件之一）

没有行框，没有间隙，没有填充，没有边框将它们分开。

因此，根据定义，如果添加1px填充，则边距不再相邻，并且折叠不会发生。

Answer 2

我担心这不会是一个能让你满意的答案。利润率就是这样。允许边距溢出父元素。它们只是为了在边距所在的元素和它周围的任何其他内容之间创建空间。如果#box之前的父元素中有一些内容，则会占用内部边距。考虑这个http://jsfiddle.net/BJYLF/2/

<div id="hnb">hnb</div>
<div id="container">
hnb
<div id="box">
</div>
</div>

实质上，边距是内容之间的空间而不是容器元素。由于同样的原因，具有相同边距的内容的两个相邻框将彼此重叠。

至于溢出，它是工作cos auto不是默认值。 http://www.w3schools.com/cssref/pr_pos_overflow.asp