2

margin-left を使用すると機能します。しかし、マージントップは機能しません。オンが機能し、他の機能が機能しない理由を知っている人はいますか?

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;

}
4

3 に答える 3

2

それはマージン崩壊と呼ばれます。これは、あるブロック要素が別のブロック要素の子である場合に発生します。ここに問題に取り組むためのいくつかの方法があります。

1-要素に境界線を追加します

2-1pxのパディングを追加します

3-位置プロパティを変更します。絶対的および比較的配置されたボックスのマージンは崩壊しません。

私は最近、それについてのブログ投稿を書きました。詳細については、こちらを参照してください。

于 2012-07-28T13:22:20.033 に答える
0

これを試してください

#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;
}​
于 2012-07-28T13:20:45.630 に答える
0

これを試して：-

  #footer {
    background-image: url(../website/images/footer.png);
    width: 1200px;
    height: 100px;
    overflow:hidden; // add overflow
  }
    
  p.copyright {
    margin-top: 10px;
    margin-left: 120px;
  }
于 2013-09-05T07:34:42.623 に答える