为什么添加边框会改变背景颜色的行为？

Question

在下面的示例中，为什么删除 #enclosure div 上的边框会使背景淡蓝色不再填充整个 div 背景？

#enclosing
{
  background: lightblue;
  margin: 0;
  border: 1px solid blue;
}

#outer
{
  margin: 40px;
}

#inner
{
  margin: 20px;
  border: 1px solid black;
}​

<div id="enclosing">
    <div id="outer">
      <div id="inner">This is nested div</div>
    </div>
</div>

JSFiddle上的例子

Answer 1

outer div 有边距，需要“推”一些东西。

当封闭的 div 没有边框（或填充）时， outer div 的边距就没有任何东西可以推动。

将边框或填充添加到 div 的顶部/底部为其提供了必要的包含，以便outer div 计算关闭。

我相信这就是所谓的Box Model中的collapsing margins