當我使用保證金 - 左側它的作品。但是，保證金頂部不起作用。任何人都知道爲什麼該工作，而另一個不工作？保證金頂部不起作用

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; 

}

來源

2012-07-28 user1548544

什麼是你的頁腳上面？已經浮動的東西？定位？可能浮標沒有被清除？ – 2012-07-28 13:00:20

這裏工作得很好：http://jsfiddle.net/qyUMC/。你可以給更多的代碼 – Enve 2012-07-28 13:00:25

@恩這是行不通的：http://jsfiddle.net/nFJgV/ – JJJ 2012-07-28 13:02:11

嘗試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; 
}

來源

2012-07-28 13:20:45 Uttara

這就是所謂的保證金崩潰。當一個塊元素是另一個塊元素的子元素時，會發生這種情況。這裏有幾個方法來解決這個問題。

1-添加邊框到元件

2-填充

-3-變化的位置屬性的添加1px的。絕對和相對定位的盒子的邊距不會摺疊。

我最近寫了一篇博客文章，要了解更多信息請參考here

來源

2012-07-28 13:22:20

更多關於margin collapse的信息https://www.sitepoint.com/collapsing-margins/ – 2017-09-09 00:32:26

試試這個： -

#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-05 07:34:42 SaurabhLP

保證金頂部不起作用

回答

試試這個： -

相關問題