带有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置于外部，尽管这些可能会导致不必要的剪辑或滚动条。