外邊距合並margin-top屬性失效。代碼實例如下:
螞蟻部落
.first{
width:100px;
height:100px;
background-color:red;
margin-bottom:60px;
}
.second{
width:100px;
height:100px;
background-color:green;
margin-top:40px;
}
從以上代碼的運行可以看出，第二個div設置的margin-top並沒有生效，起作用的是第壹個div的設置的margin-bottom，這裏有個規律，那就是合並後的外邊距的高度等於外邊距的高度中的較大的壹個，所以遇到此種情況可以格外註意外邊距大小的設置。
原因二:
子元素和父元素也可能會導致設置的子元素上外邊距失效情況，代碼實例如下:
螞蟻部落
.father{
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
.children{
width:100px;
height:100px;
background-color:blue;
margin-top:10px;
}
解決方法:
為父對象在相應的外邊距方向上有邊框(border)和內邊距(padding)，或者為overflow屬性值設置為hidden即可避免。
IE6瀏覽器下不會出現外邊距合並現象。