6

以下を考えると、ページの上部に 200 ピクセルの赤いボックスがあり、その後に 100 ピクセルの空白があり、下部に紫色のボックスがあると予想されます。これは、Dreamwever の WYSIWYG ビューで表示されるものですが、FF IE Chr で表示されるのは、ページの中央にある赤いボックスです。おもしろいことに、ラッパー div に境界線を追加すると、期待どおりの結果が得られます。

つまり、#content div の margin-top:300px が #header div を押し下げているということです。#header div は #wrapper div 内に完全に配置されているため、なぜこれが起こっているのかわかりません。

<style>
#wrapper{
    width:960px;
    margin:0 auto;
    background-color:#fff;
    position:relative;
    border:0px solid green;
    }
#header{
    width:960px;
    height:200px;
    background-color:#f00;
    position:absolute;
    top:0px;
    left:0px
    }
#content{
    width:960px;
    background-color:#f2f;
    margin-top:300px;
    }
</style>


<div id="wrapper">
    <div id="header">header</div>
    <div id="content">content<br  /><br  /><br  /></div>
</div>
4

1 に答える 1

8

はい、あなたは正しい軌道に乗っています。実際に起こっていることは、300px のマージンが #wrapper に適用されていることです( したがって、それとともに #header を押し下げています)。これは、margin を折りたたむという W3C ボックスモデルの動作のためです。

この場合、「ボックスの上マージンと最初のインフローの子の上マージン」は折りたたまれます: #wrapperの 0px 上マージンと#contentの 300px 上マージンは、1 つの上マージンに結合されます。#wrapper 用(#header には絶対位置があるため、#content はフロー内の最初の子です)。

これを修正する簡単な方法は、 border や change#headerの位置以外に、margin を padding に変更することです:

#content{
  width:960px;
  background-color:#f2f;
  padding-top:300px;
}

http://www.w3.org/TR/CSS2/box.html#collapsing-marginsを参照してください。

于 2012-04-27T01:48:16.657 に答える