保证金顶部崩溃问题

Question

我可能只是不了解基本的CSS和HTML,但这让我不知所措.我在"内容"div中有一个"test"div,我想要一个10px NOT padding的margin-top,因为我想将整个"test"元素向下推10个像素.margin-top似乎是答案,但它不是从父元素推送,而是从页面顶部推送.

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Source Sans Pro', sans-serif;
}
body {
  background-color: #336699;
}
a {
  text-decoration: none;
  color: #336699;
}
#container {
  margin: 0px auto;
  width: 1000px;
}
#content {
  background-color: rgba(255, 255, 255, 1);
  margin-top: 50px;
  height: 500px;
  border-radius: 10px;
}
#test {
  background-color: red;
  margin-top: 10px;
}

<div id="container">
  <div id="content">
    <div id="test">
      test
    </div>
  </div>
</div>

Answer 1

你正在目睹崩溃的利润.只需添加overflow:auto;到#content.

#content {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 50px;
    height: 500px;
    border-radius: 10px;
    overflow:auto;
}

jsFiddle例子