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

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

outerdiv 有边距，需要“推动”一些东西。

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

将边框或填充添加到 div 的顶部/底部为其提供了outerdiv 计算所需的包容性。

我相信这就是所谓的collapsing margins盒子模型