[解決済み】このCSSのmargin-topスタイルが機能しないのはなぜですか？

質問

divの中のdivにmarginの値を追加しようとしています。topの値以外はすべて正常に動作しますが、無視されるようです。しかし、なぜでしょうか？

期待したこと

得られるもの

コード

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

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools は、なぜマージンがこのような動作をするのか、説明がありません。

解決方法は？

実際に表示されているのは #inner 要素 折りたたみ の上端にある #outer 要素のみを残し #outer のマージンはそのままです（画像には写っていませんが）。マージンが同じなので、両方のボックスの上端は互いに同じ高さになります。

以下は、W3Cの仕様書から該当箇所を抜粋したものです。

8.3.1 余白の折りたたみ

CSSでは、2つ以上のボックスの隣接するマージン（兄弟である場合もそうでない場合もある）を組み合わせて、1つのマージンを形成することができる。このように結合されたマージンは、次のように言われます。 折りたたむ と呼ばれ、結合されたマージンは 折りたたみ余白 .

隣接する垂直方向の余白の折りたたみ [...]

2つの余白は 隣接 の場合のみです。

• 両方が同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属している
• 両者はラインボックス、クリアランス、パディング、ボーダーで区切られていない
• の両方が垂直方向に隣接するボックスエッジに属している、つまり、次のペアのいずれかを形成している。
  • ボックスの上端マージンとその最初のインフロー子の上端マージン

マージンが崩れないようにするには、以下のいずれかを行います。

• のどちらかをフロートさせます。 div 要素
• のどちらかを作成します。 div 要素 インラインブロック
• 設定 overflow の #outer から auto (または visible )

上記のオプションでマージンが崩れないようにする理由は。

• フロートされたボックスと他のボックスの間のマージンは折りたたまれません（フロートとそのフロー内の子の間でも折りたたまれません）。
• 新しいブロックフォーマットコンテキストを確立する要素（フロートや 'visible' 以外の 'overflow' を持つ要素など）のマージンは、それらのインフロー子と共に折りたたまれることはない。
• インラインブロックボックスの余白は（フロー内の子であっても）折りたたまれない。

左右の余白が期待通りの挙動をするのは。

水平方向の余白が崩れることはありません。