子元素的margin-top作用於外層父元素解決方法:有時候在設置子元素的margin-top屬性的時候，本來是要作用於父元素，但是表現的結果卻是父元素具有了margin-top效果，下麵就通過代碼實例介紹一下如何解決此問題。代碼實例如下:螞蟻部落 上面代碼實現了我們的要求，其實這個就是典型的...
子元素的margin-top作用於外層父元素解決方法:
有時候在設置子元素的margin-top屬性的時候，本來是要作用於父元素，但是表現的結果卻是父元素具有了margin-top效果，下麵就通過代碼實例介紹一下如何解決此問題。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:200px; background:red; overflow:hidden; } #main{ width:50px; height:50px; background:blue; margin-top:50px; } </style> <body> <div id="box"> <div id="main"></div> </div> </body> </html>
上面代碼實現了我們的要求，其實這個就是典型的外邊距合併問題，添加overflow:hidden即可消除此現象，這裡就不多介紹了，具體可以參閱margin外邊距合併詳解一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12696
更多內容可以參閱:http://www.softwhy.com/divcss/
