没有回答“为什么”(必须是w/边距折叠的东西)，但似乎最简单/最合乎逻辑的方法来做你正在尝试做的事情，将只是添加padding-top到外部div:

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

注意:没有必要将div设置为display:block;除非你的代码中有其他东西告诉它不是block。

实际上，您可以看到#inner元素的上边缘塌陷到#outer元素的上边缘，只留下#outer边缘完好无损(尽管在图像中没有显示)。两个盒子的上边缘彼此平齐，因为它们的边距相等。

以下是来自W3C规范的相关要点:

8.3.1边际萎缩 在CSS中，两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合成一个边距。以这种方式结合的保证金被称为崩溃保证金，由此产生的合并保证金被称为崩溃保证金。 相邻的垂直边缘塌陷[…]

当且仅当: 两者都属于参与同一块格式化上下文的流内块级框 没有行框，没有间隙，没有填充，没有边界将它们分开 两者都属于垂直相邻的框边，即形成以下对之一: 一个盒子的上边距和它的第一个流入子框的上边距

你可以做以下任何一件事来防止边缘崩溃:

浮动任意一个div元素 使任何一个div元素成为内联块 将#outer的overflow设置为auto(或除visible以外的任何值)

上述选项防止保证金崩溃的原因是:

浮动框和任何其他框之间的边距不会折叠(即使浮动和它的流中子框之间也不会折叠)。 建立新的块格式上下文的元素的边距(例如float和带有“overflow”而不是“visible”的元素)不会随其流内子元素一起折叠。 内联块框的页边距不会折叠(即使它们的流子框也不会折叠)。

左右边距的表现如你所料，因为:

水平边距永不塌陷。

不太清楚为什么，但改变内部CSS为

display: inline-block;

似乎有用。

如果你有一个边际崩溃的问题，那么解决这个问题，你可以添加 显示:flow-root;到父容器。

除此之外，如果margin-top被忽略，尝试margin-top的负值，例如:margin-top: -2px;

只是为了快速修复，尝试像这样将子元素包装成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;}