尝试使用display: inline-block;在内部div上，就像这样:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

试试这个:

#{外 宽度:500 px; 身高:200 px; 背景:# FFCCCC; Margin:50px auto 0 auto; 显示:表; ｝ #{内部 背景:# FFCC33; Margin:50px 50px 50px 50px; 填充:10 px; 显示:块; ｝ < div id = "外" > < div id = "内部" > 你好世界! < / div > < / div >

好运！

尝试使用display: inline-block;在内部div上，就像这样:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

只是为了快速修复，尝试像这样将子元素包装成div元素-

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

内部div的边距不会因为外部和内部div之间1px的填充而崩溃，所以逻辑上你会有1px的额外空间以及内部div的现有边距。

外部div使用padding-top:50px，如下所示:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

注意:填充会增加你的div的大小。在这种情况下，如果你的div的大小很重要，我的意思是如果它必须有一个特定的高度。降低高度50px:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

@BoltClock提到的是相当扎实的。 这里我想为这个问题添加更多的解。 检查w3c_collapse边距。绿色部分是潜在的思考如何解决这个问题。

解决方案1

浮动框和任何其他框之间的边距不会折叠(即使浮动和它的流中子框之间也不会折叠)。

这意味着我可以添加float:left到#outer或#inner demo1中。

还要注意，float会使auto在保证金中无效。

解决方案2

建立新的块格式上下文的元素的边距(例如float和带有“overflow”而不是“visible”的元素)不会随其流内子元素一起折叠。

除了visible，让我们把overflow: hidden放到#outer中。这种方法看起来很简单也很得体。我喜欢它。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

解决方案3

绝对定位框的页边距不会折叠(即使它们的子流也不会折叠)。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

or

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

这两种方法将破坏正常的div流程

解决方案4

内联块框的页边距不会折叠(即使它们的流子框也不会折叠)。

和@enderskill一样吗

解决方案5

流内块级元素的下边距总是与它的下一个流内块级兄弟元素的上边距一起折叠，除非该兄弟元素有间隙。

这与问题没有太大关系，因为它是兄弟姐妹之间的崩溃边缘。这通常意味着如果一个top-box有margin-bottom: 30px，而一个sibling-box有margin-top: 10px。它们之间的总边距是30px而不是40px。

解决方案6

如果一个流内块元素没有顶部边框，没有顶部填充，并且子元素没有间隙，则该流内块元素的顶部边距与其第一个流内块级子元素的顶部边距一起折叠。

这很有趣，我可以添加一条顶部边框

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

并且<div>默认是块级的，所以你不必刻意声明它。抱歉，由于我的新手声誉，不能发布超过2个链接和图像。下次看到类似的问题时，至少你知道问题从哪里来。