Warum funktioniert dieser CSS-Rand-Top-Stil nicht?

Question

Ich habe versucht, einen margin-Wert zu einem div hinzuzufügen. Bis auf den höchsten Wert, der scheinbar ignoriert wird, funktioniert alles einwandfrei. Aber warum?

Meine Erwartungen:

Was ich habe:

Code:

#outer {
  Breite: 500px;
  Höhe: 200px;
  Hintergrund: #FFCCCC;
  Rand: 50px auto 0 auto;
  Bildschirmsperre;
}

#innere {
  Hintergrund: #FFCC33;
  Rand: 50px 50px 50px 50px;
  Polsterung: 10px;
  Bildschirmsperre;
}

<div id="outer">
  <div id="inner">
    Hallo Welt!
  </div>
</div>

W3Schools erklärt nicht, warum dies mit margin passiert.

Answer 1

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

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

Answer 2

您实际上看到的是 #inner 元素的上边距 折叠到#outer元素的上边缘，仅保留#outer边距完好无损（尽管图像中未显示） 。两个盒子的顶部边缘彼此齐平，因为它们的边距相等。

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

您可以执行以下任一操作来防止边距折叠：

上述选项防止边距折叠的原因是：

左右边距的表现符合您的预期，因为：