css - 带有 margin-top 的内部 div 向下推外部 div

Question

我有两个 div，一个在另一个里面：

<div id="main_content">
    <div id="page_title">
        <h1>This is the title of the page</h1>
    </div>
    Halo halo halo
</div>

和CSS：

/****** MAIN ******/
#main_content {
    position: relative;
    top: -60px;
    z-index: 1;
    background-color: #FFFFFF;
    width: 1248px;
    margin: 0 auto;
}
/****** END OF: MAIN ******/

/****** PAGE TITLE ******/
#page_title {
    position: relative;
    margin-top: 100px;
    background: red url("img.png") no-repeat 50% 50%;
    height: 20px;
    width: 1300px;
}

问题是当我添加“margin-top：100px;”时 到#page_title（内部div），它也将外部div“下推”了100 px，所以我可以看到它下面的主体颜色。我想保持外部 div 原样 = 就像它根本没有边距一样。我怎样才能做到这一点？我发现 overflow:auto 应该可以解决这个问题（它有点），但它使外部 div 低于正常水平。还有其他方法吗？非常感谢！

Answer 1

用外部替换margin-top内部padding-top将修复它。就像将overflow:hidden或overflow:auto放在外部一样，尽管这些可能会导致不必要的剪辑或滚动条。