html - 边距顶部不起作用

Question

当我使用左边距时，它可以工作。但边距顶部不起作用。任何人都知道为什么 on 起作用而另一个不起作用？

html代码

<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © </p>
</div> <!-- END FOOTER -->

CSS

#footer {

background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;

}

p.copyright {

margin-top: 10px;
margin-left: 120px;

}

Answer 1

这称为保证金崩溃。当一个块元素是另一个块元素的子元素时，就会发生这种情况。这里有几个方法来解决这个问题。

1-为元素添加边框

2-添加1px的填充

3-更改位置属性。绝对和相对定位框的边距不会塌陷。

我最近写了一篇关于此的博客文章以了解更多信息，请参阅此处

Answer 2

试试这个

#footer {
    background-image: url(../website/images/footer.png);
    width: 1200px;
    height: 100px;
    position:absolute;
}

p.copyright {
    background-color:red;
    margin-top: 10px;
    margin-left: 120px;
}​

Answer 3

尝试这个：-

  #footer {
    background-image: url(../website/images/footer.png);
    width: 1200px;
    height: 100px;
    overflow:hidden; // add overflow
  }
    
  p.copyright {
    margin-top: 10px;
    margin-left: 120px;
  }