CSSで苦労する：外側のコンテナが内側のコンテナの上端までスナップしています。どうして？

ここに私のURL：http://www.chs07reunion.info（進行中の仕事）CSSで苦労する：外側のコンテナが内側のコンテナの上端までスナップしています。どうして？

あなたが私が話していることを見るべきである。で、内側容器で

#headerandbg { 
    background-color: #4A514D; 
    width: 960px; 
    background-image: url(Headfonts2.jpg); 
    height: 1280px; 
    **margin-top: 0;** 
    margin-right: auto; 
    margin-left: auto; 
}

：私は外容器がに設定されている両方の私のブラウザで

<body> 
    <div id="headerandbg"> 
     <div id="corkbg"> 
     </div> 
    </div> 
</body>

：

#corkbg { 
    width: 880px; 
    background-color: #C90; 
    **margin-top: 140px;** 
    margin-right: 40px; 
    margin-left: 40px; 
    background-image: url(cork5.jpg); 
    height: 1100px; 
}

ページのhtmlは#headerandbg #corkbgが続いていますコンテナの上端には隙間があり、上端の高さは内側のコンテナ（現在は140pxに設定）に依存します。内側を取り出すと、外側のコンテナが（私が望むところ）トップに戻ります。助言がありますか？

出典

2011-05-20 James9847

それが崩壊マージンの場合です：http://reference.sitepoint.com/css/collapsingmargins – DaiYoukai

は#headerandbgにoverflow: auto;を追加します。

#headerandbg { 
    overflow: auto; 

    background-color: #4A514D; 
    width: 960px; 
    background-image: url(Headfonts2.jpg); 
    height: 1280px; 
    **margin-top: 0;** 
    margin-right: auto; 
    margin-left: auto;

出典

2011-05-20 16:11:23 Blender

ではなく、パディングを使用してみてください。「離れていく」コンテンツがない場合、マージンは崩壊すると考えられています。 Firefoxで私のために

#headerandbg { 
    padding-top: 140px; 
} 

#corkbg { 
    margin-top: 0; /* or remove this */ 
}

作品は4

出典

2011-05-20 16:12:07

CSSで苦労する：外側のコンテナが内側のコンテナの上端までスナップしています。どうして？

答えて

関連する問題