Question

这是CSS1代码。

＆＃13;

id | position  | start_date | end_date   | cnt
---+-----------+------------+------------+----
 1 | staff     | 2005-01-01 | 2006-01-01 |   2
 1 | assistant | 2006-01-02 |            |   2
 3 | driver    | 2005-01-01 | 2007-01-01 |   3
 3 | operator  | 2007-01-02 |            |   3
 3 | intern    | 2002-01-01 | 2002-03-01 |   3

＆＃13;

div.footer{
background:url('http://i.imgur.com/rfC0Ntb.jpg') repeat-x;
height:88px;
margin:0 auto;
width:400px;
border:1px solid red;
}
div.footer p{
margin-top:40px;
text-align:center; 
border:1px solid red;
}

＆＃13;

＆＃13; 在css1中添加了40px：
1.在框

<body>
    <div class="footer"><p>Copyright&copy; 2013 service center</p></div>
</body>

的顶部。
2.在框中div.footer p。
这是css2代码。

＆＃13;

div.footer

＆＃13;

div.footer{
background:url('http://i.imgur.com/rfC0Ntb.jpg') repeat-x;
height:88px;
margin:0 auto;
width:400px;
}
div.footer p{
margin-top:40px;
text-align:center; 
}

＆＃13;

在css2中，<body> <div class="footer"><p>Copyright© 2013 service center</p></div> </body>已从border:1px solid red和div.footer中删除，结果是在div.footer p框的顶部添加了1.40px 2.开箱div.footer
在我的观察中，css1代码和css2代码之间可能没有不同的效果，div.footer只是绘制一个区域，为什么它会导致差异？
我想知道原因，为什么？

Answer 1

那是margin-collapsing，没有边框，没有任何东西可以包含子元素的边距。您也可以使用padding或overflow: auto

修复此问题，而不是边框

来自MDN

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度，或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母
之外

div.footer {
  background: url('http://i.imgur.com/rfC0Ntb.jpg') repeat-x;
  height: 88px;
  margin: 0 auto;
  width: 400px;
  padding: 1px;
}
div.footer p {
  margin-top: 40px;
  text-align: center;
}

<div class="footer">
  <p>Copyright&copy; 2013 service center</p>
</div>

div.footer {
  background: url('http://i.imgur.com/rfC0Ntb.jpg') repeat-x;
  height: 88px;
  margin: 0 auto;
  width: 400px;
  overflow: auto;
}
div.footer p {
  margin-top: 40px;
  text-align: center;
}

<div class="footer">
  <p>Copyright&copy; 2013 service center</p>
</div>

Answer 2

试试这个 http://codepen.io/yash02/pen/xVMVEY 在代码中使用css并尝试按照问题中的问题注释填充和边距。 Padding是我添加的。

实际上，您设置的40px边距是从页面顶部而不是div获取边距。

填充将解决问题

为什么margin-top在删除`border：1px solid red`后无法正常工作？

2 个答案: