试试这个： -

Question

当我使用margin-left时，它可以工作。但保证金顶部不起作用。任何人都知道为什么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-更改位置属性。绝对和相对定位的盒子的边缘不会崩溃。

我最近撰写了一篇博文，了解更多信息，请参阅here

Answer 2

试用this

#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;
  }

...谢谢

保证金不起作用

3 个答案:

试试这个： -