用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挣扎：外部容器捕捉到内部容器的顶部边界。为什么？

回答

相关问题