Html 与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：

---

在我的浏览器上，两个容器顶部都有一个间隙，顶部边距高度取决于内部容器（当前设置为140px）。如果我取出内部容器，外部容器会回到顶部（我想要的地方）。有什么建议吗？

添加

溢出：自动至
#标题栏bg
：

#headerandbg {
    overflow: auto;

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

尝试使用填充。当没有“离开”的内容时，利润率就会崩溃

在Firefox 4中对我很有用。
这是一个边距崩溃的例子：
#headerandbg {
    overflow: auto;

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

#headerandbg {
    padding-top: 140px;
}

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