Question

在下面的示例中，为什么删除#enclosing 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

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

1 个答案: