Css 带边距顶部的内div向下推动外div

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

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

---

问题是，当我将“页边顶部：100px；”添加到#page_标题（内部div）时，它会将外部div“向下推”100 px，因此我可以看到它下面的主体颜色。我想保持外部div的原样，就像它没有任何边距一样。我怎样才能做到这一点？我发现overflow:auto应该可以解决这个问题（它有点解决），但它会使外部div低于正常情况。还有别的办法吗？非常感谢

将内部的

margin-top

替换为外部的

padding-top

将修复它。将

overflow:hidden

或

overflow:auto

放在外部，尽管这可能会导致不必要的剪切或滚动条。

将内部的

边距顶部

替换为外部的

padding top

将解决此问题。将

overflow:hidden

或

overflow:auto

放在外部也一样，尽管这可能会导致不必要的剪切或滚动条。

这种现象称为边距折叠。不清楚您试图做什么。例如，为什么要将页面标题的高度设置为20px？文本应该在红色背景中吗？为什么在主内容中设置顶部：-60px？你能发布你想做的事情的图片吗？另一种方法是使用

flex-box

像这样的

\main\u内容{display:flex；height:auto；flex direction:column；flex wrap:wrap；

这种现象称为页边折叠。不清楚您要做什么。例如，为什么要将页面标题的高度设置为20px？文本是否应该在红色背景内？为什么在主内容中设置顶部：-60px？您可以发布图像吗另一种方法是使用

flex-box

像这样的

#main_-content{display:flex；height:auto；flex-direction:column；flex-wrap:wrap；

就是这样！我确实不想使用overflow:auto，因为这样会“剪切”内部剪辑（那一个比外层宽，需要保持这种方式）非常感谢！就是这样！我确实不想使用overflow:auto，因为这会“切割”内部剪辑（那一个比外层宽，需要保持这种方式）非常感谢！

/****** 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;
}