为什么这种CSS边距-顶部样式不工作？

Question

为什么这种CSS边距-顶部样式不工作？

我试图在另一个div中添加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: block;

}

<div id="outer">

  <div id="inner">

  Hello world!

  </div>

</div>

W3学校不能解释为什么保证金会这样。

Answer 1

试着使用display: inline-block;在内部区域。#outer&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:500px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;height:200px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;background:#FFCCCC; &nbsp;&nbsp;&nbsp;&nbsp;margin:50px&nbsp;auto&nbsp;0&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;display:block;}#inner&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:#FFCC33; &nbsp;&nbsp;&nbsp;&nbsp;margin:50px&nbsp;50px&nbsp;50px&nbsp;50px; &nbsp;&nbsp;&nbsp;&nbsp;padding:10px; &nbsp;&nbsp;&nbsp;&nbsp;display:inline-block;}