トップマージンは私の予想通りに動作しません。なぜですか？

Question

今、少しばかりHTMLをやっていますが、余白を使うと問題にぶつかります。これは、通常、単にパディングを使用するようになります。

とにかく、私が現在取り組んでいることの例を挙げておきます。

http://vasoshield.xcsit.com/index.html

主な構造..、代わりに "ヘッダ" のdivからダウン150ピクセルプッシュの "mainNav" のdivに150ピクセル：私はマージントップを置く

<div id="main"> 
    <div id="header"> 
     <div id="mainNav"> 
      main navigation... 
     </div> 
    </div> 
    <div id="content"> 
     page content... 
    </div> 
</div> 



#main { 
    margin: 0 auto; 
    width: 745px; 
    padding-left: 175px; 
    padding-right: 50px; 
    background: url(../images/white_bg.jpg) no-repeat top left; 
    position: relative; 
} 

#header { 
    height: 210px; 
} 
#mainNav { margin-top: 175px; } 

問題が..です..ページ全体が下に移動します。だから "メイン"のdiv実際に150pxをプッシュ取得..私はなぜ理解していない！ 「mainNav」divにpadding-top：150pxを使用すると、実際には「header」divを使用して下に移動します。

私の質問は意味がありますか？

私はちょうど知りませんルールのいくつかの並べ替えがあると確信しています。あらかじめありがとう！

Answer 1

マージンはです。

参照：要するにhttp://www.w3.org/TR/CSS21/box.html#collapsing-margins

、#mainと＃ヘッダーの上マージンは#mainNavのマージンを（隣接する）の隣にあります。そのような垂直方向に隣接するマージンは、一般に崩壊する。それらは1つの合成マージンを形成する。これをborder-collapse: collapsedとのtdの境界線と比較してください。これらも1つの境界になり、幅は最も太い境界に等しくなります。

垂直マージンが崩壊するだけで、隣接している場合にのみ倒れます。特別なです。完全な詳細については仕様を参照してください。ただし、絶対配置、浮動小数点数などのようなものは、マージンが崩壊するのを防ぎます。

たとえば、#header { padding-top:1px; }を設定するか、境界線が隣接しないように指定された説明のうちの1つを適用します（要素をフローティングするなど）。フローティングと他のケースでは、スペックを単純化するためにマージンが崩壊するのを防ぎます。複雑な領域に入ることはほとんどありません。

余白の代わりにパディングを使用するか（前述の1pxパディングのような中間の間隔を適用する）フォールバックオプションを使用することをお勧めします。浮動小数点数や絶対位置を導入すると、ページが複雑になると（特に印刷シナリオの検討が始まると）奇妙なやり取りが発生する可能性がありますが、レイアウトの残りの部分にはかなりの影響があります。

Answer 2

あなたのメインのdivポジションをposition：absoluteに配置しようとします。それは私が思うように動作します。理由がわからない

Answer 3

mainNav divの前に divに内容がないため、ブラウザが考慮する必要があるのは最初のマージンであるため、ページ全体が下に移動したように見えます。私はすべてのdivに1px solid redボーダーを追加することをお勧めします。

Answer 4

まあ、単純にオーバーフローを追加： "メイン"コンテナに隠されています。