margin-top不是作用於父元素的原因
- 巴扎黑原創
- 2017-06-28 13:44:041640瀏覽
為什麼margin-top不是作用於父元素:
#建議:盡可能的手寫程式碼，可以有效的提高學習效率和深度。
至於margin-top屬性的基本用法再簡單不過，那就是設定一個物件的上外邊距，看下面的程式碼實例:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>为什么margin-top不是作用于父元素</title><style type="text/css"> *
{
margin:0px;
padding:0px;
} p
{
width:100px;
height:100px;
background-color:green;
margin-top:50px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
以上程式碼可以將p的上方邊距設定為50px，一切運作良好，沒有任何問題，再來看下一段程式碼:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> #parent
{
width:200px;
height:200px;
background-color:red;
} #children
{
width:60px;
height:60px;
background-color:green;
margin:0px auto;
margin-top:50px;
}
</style>
</head>
<body>
<p id="parent">
<p id="children"></p>
</p>
</body>
</html>
以上程式碼的初衷是讓子元素的頂部距離父元素50px，但是事實上卻並沒有實現預期的效果，而是子元素頂部緊貼父元素，並且margin-top好像轉移給了父元素，讓父元素產生上外邊距。這其實是典型的外邊距合併問題，但並非 所有的瀏覽器都會產生這種情況，一般標準瀏覽器都會出現此現象，而IE6和IE7在此狀態下不會出現外邊距合併現象。上外邊距合併出現的條件:
1.父元素的上邊距與子元素的上邊距之間沒有border。
2.父元素的上邊距與子元素的上邊距之間沒有非空內容。
3.父元素的上邊距與子元素的上邊距之間沒有padding。
3.父元素和子元素中沒有設定定位屬性（除static和relative）、overflow（除visible）和display:inline-block等。
4.父元素或資源都沒有浮動。
注意:以上條件必須都要滿足才可以。那麼解決此中情況的方式也很簡單，只要破壞上面的一種情況就可以了。
更多關於外邊距合併內容可以參考margin外邊距合併詳解一章節。
以上是margin-top不是作用於父元素的原因的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn