保证金属性不起作用但位置属性是。为什么呢？

Question

我想为网页的这一部分重写html和css。

首先，我尝试使用边距来推下#Header div但是从顶部没有发生：标题仍然附加到#Container的顶部边框。

＆＃13;

＆＃13;

#Container {
  background: blue;
  height: 200px;
  width: 440px;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
}
#Header {
  background: #CF1111;
  width: 400px;
  height: 130px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 30px;
  margin-bottom: 20px;
}

＆＃13;

<div id="Container">
  <div id="Header"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

然后，我的解决方案是使用具有相对定位的top属性

＆＃13;

＆＃13;

#Container {
  background: blue;
  height: 200px;
  width: 440px;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
}
#Header {
  background: #CF1111;
  width: 400px;
  height: 130px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 30px;
  position: relative;
  top: 30px;
}

＆＃13;

<div id="Container">
  <div id="Header"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么margin-top没有工作？