Question

我可能只是不了解基本的CSS和HTML，但这让我不知所措。我有一个＆＃34;测试＆＃34; div内容＆＃34;内容＆＃34; div我希望有一个10px的填充余量不填充，因为我想推动整个＆＃34;测试＆＃34;元素减少了10个像素。 margin-top似乎是答案，但它不是从父元素推送，而是从页面顶部推送。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

你正在见证collapsing margins。只需将overflow:auto;添加到#content。

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

<强> jsFiddle example

Answer 2

如果你想只移动#test元素，那么将padding-top：10px添加到其父元素。

Answer 3

设置#Container有一个位置：绝对;然后将您希望使用margin-top的元素设置为position：relative

Answer 4

你遇到了一个叫崩溃的问题 - 边距。只是为了确保您没有做任何其他错误，请添加以下代码：

*, *:after, *:before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

这将确保您的盒子模型是正确的。并向内容添加overflow auto。

这是一个修复了你的东西的演示。

http://codepen.io/yisera/pen/qizwt/

保证金顶部崩溃问题

4 个答案: