Html 为什么CSS页边空白顶部样式不起作用？

我尝试在另一个div中的一个div上添加边距值。除了顶部值之外，所有操作都正常，似乎都被忽略了。但是为什么呢

我的预期：

我得到的：

代码：

#外部{
宽度：500px；
高度：200px；
背景:#FFCCCC；
保证金：50px自动0自动；
显示：块；
}
#内在的{
背景:#FFCC33；
保证金：50px 50px 50px 50px；
填充：10px；
显示：块；
}

你好，世界！

尝试使用

显示：内联块在内部分区上

#外部{
宽度：500px；
高度：200px；
背景:#FFCCCC；
保证金：50px自动0自动；
显示：块；
}
#内在的{
背景:#FFCC33；
保证金：50px 50px 50px 50px；
填充：10px；
显示：内联块；
}
不确定原因，但将内部CSS更改为

display: inline-block;

似乎有效。
实际上，您看到的是
#内部
元素的上边缘进入
#外部
元素的上边缘，只剩下
#外部
边缘完好无损（尽管未在图像中显示）。两个框的顶部边缘彼此齐平，因为它们的边距相等

以下是W3C规范中的相关要点：

8.3.1折叠式边缘
在CSS中，两个或多个框（可能是同级框，也可能不是同级框）的相邻边距可以合并形成一个边距。以这种方式合并的保证金称为崩溃保证金，由此产生的合并保证金称为崩溃保证金

相邻的垂直边缘塌陷[…]

两个边距相邻当且仅当：


两者都属于参与相同块格式上下文的流内块级别框
无线框、无间隙、无填充和无边框将它们分隔开
两者都属于垂直相邻的长方体边缘，即形成以下一对：

框的上边距及其第一个流入子项的上边距


您可以执行以下任一操作以防止页边距塌陷：


浮动任何一个
div
元素
使您的
div
元素
设置（或除可见的
以外的任何值）


上述选项阻止边距崩溃的原因是：


浮动框和任何其他框之间的边距不会塌陷（甚至浮动框与其流入子项之间也不会塌陷）
建立新块格式上下文的元素（例如浮动和具有“溢出”而非“可见”的元素）的边距不会与其在流中的子元素一起塌陷
内联块框的边距不会折叠（即使其在流中的子项也不会折叠）

左右边距的行为与您预期的一样，因为：

水平边距永远不会塌陷

不知道为什么你所拥有的不起作用，但你可以补充

溢出：自动

到外部分区。
如果在
#outer
中添加任何填充，则该选项有效


#外部{
宽度：500px；
高度：200px；
背景:#FFCCCC；
保证金：50px自动0自动；
显示：块；
垫面：1px；
}
没有回答“为什么”（必须是带有折叠边距的内容），但似乎最简单/最符合逻辑的方法是将
填充顶部添加到外部div：


次要注释-无需将div设置为
display:block除非代码中有其他内容告诉它不要被阻塞。
尝试以下方法：

#外部{
宽度：500px；
高度：200px；
背景:#FFCCCC；
保证金：50px自动0自动；
显示：表格；
}
#内在的{
背景:#FFCC33；
保证金：50px 50px 50px 50px；
填充：10px；
显示：块；
}​


祝你好运
我想将#internaldiv的position属性设置为relative也可能有助于实现此效果。但不管怎样，我尝试了在IE9和最新的Google Chrome上粘贴在问题中的原始代码，它们已经在没有任何修改的情况下提供了理想的效果。
使用
padding top:50px
作为外部div。类似这样：

#外部{
宽度：500px；
高度：200px；
背景:#FFCCCC；
保证金：50px自动0自动；
显示：表；}

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

#外部{
宽度：500px；
高度：150像素；
背景:#FFCCCC；
保证金：50px自动0自动；
显示：表；}
你试过了吗！最重要的是，它将迫使一切：

margin:50px 50px 50px 50px !important;

@BoltClock提到的内容非常可靠。
在这里，我只想为这个问题添加更多的解决方案。
看看这个。绿色部分是解决这个问题的潜在思路

解决方案1

浮动框和任何其他框之间的边距不会塌陷（甚至浮动框与其流入子项之间也不会塌陷）

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

还要注意，
float
将使页边空白中的
auto
无效

解决方案2

建立新块格式上下文的元素（例如浮动和具有“溢出”而非“可见”的元素）的边距不会与其在流中的子元素一起塌陷

除了
可见
，让我们将
溢出：隐藏
放入
#外部
。这种方式看起来很简单，也很得体。我喜欢

#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;
}

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

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

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

}

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