奇妙なCSSの動作... 1pxのボーダーを削除すると、<DIV>が約20ピクセル移動します - css、html-parsing

私には次のものがあります：

CSS

#pageBody
{
height: 500px;
padding:0;
margin:0;
/*border: 1px solid #00ff00;*/
}

#pageContent
{
height:460px;
margin-left:35px;
margin-right:35px;
margin-top:30px;
margin-bottom:30px;
padding:0px 0 0 0;
}

    <div id="pageBody">
<div id="pageContent">
<p>
blah blah blah
</p>
</div>
</div>

pageBodyの境界線をコメント解除した場合、すべてが優しくフィットします...私は物事が予想通りだったことを確認するために国境を接していました。しかし、ボーダーを削除すると、pageBodyは約20pxでページをドロップダウンしますが、pageContentはまったく移動しないように見えます。

これは実際のページではなく、サブセットです。実用的な最小限のサンプルを生成することを試みることができる明白なものが何もないならば、私は最初に簡単な答えがあるかもしれないと思った。

私はChromeとIE8で同じ問題を見ます、1pxの境界線がdivの内容を大きくしすぎて大きすぎたのかもしれませんが、#pageContentの高さを400などに変更しても違いはありません。そのdivの下の底。

回答：

一見すると、あなたがボーダーまたはマージンを追加するとき pageBody、 のトップ pageContent として計算されます pageBody.border + pageBody.margin + pageContent.margin-top。さもなければそれは無視するようです pageContent.margin-top.

これはの典型的なケースです マージン崩壊

マージンは崩壊しています。
（#pageBodyを赤の背景、#pageContentを青の背景にすると表示されます。）

つまり、両方ともブロック要素であり、マージンが接触しているので、それらは一緒に折りたたまれ、大きい方が有効になります。
両方のマージン間にボーダーまたはパディングがある場合、それらは隣接していないため、折りたたまれません。

これは予想される動作です。 http://www.w3.org/TR/CSS2/box.html#collapsing-margins

設定を試してください position: relative; あなたのdiv "sについて...私は以前に同様の種類の問題を修正しました。