1

以下の例では、＃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の例

4

1 に答える 1

2

divにはマージンがあり、outer「プッシュ」するための何かが必要です。

囲んでいるdivに境界線（またはパディング）がない場合、outerdivのマージンを押すことはできません。

outerdivの上部/下部に境界線またはパディングを追加すると、 divが計算するために必要な包含が得られます。

これがボックスモデルcollapsing marginsで知られているものだと思います

于 2012-11-09T02:35:01.517 に答える