用CSS掙扎：外部容器捕捉到內部容器的頂部邊界。爲什麼？

這是我的網址：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; 
}

隨着內膽：我有一個外部容器設置在

#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：

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

在我的瀏覽器都容器排列在頂部有一個間隙，頂部邊緣高度取決於內部容器（當前設置爲140px）。如果我拿出內部，外部容器回到頂部（我想要的地方）。有什麼建議麼？

來源

2011-05-20 James9847

這是崩潰邊緣的情況：http://reference.sitepoint.com/css/collapsingmargins – DaiYoukai

添加overflow: auto;到#headerandbg：

#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

使用填充，而不是嘗試。當沒有內容「移走」時，邊距應該會崩潰。

#headerandbg { 
    padding-top: 140px; 
} 

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

對我的作品在Firefox 4

來源

2011-05-20 16:12:07

用CSS掙扎：外部容器捕捉到內部容器的頂部邊界。爲什麼？

回答

相關問題