第一種：兩個塊級元素的上下邊距折疊
第二種：父元素和子元素（或者最后一個元素）的外邊距
第三種：空的塊級元素的上下外邊距
折疊的根本原因：
margin之間直接接觸，沒有阻隔
折疊后外邊距的計算：
1.如果兩個外邊距都是正值，折疊后的外邊距取較大的一個
2.如果兩個外邊距一正一負，折疊后的邊距為邊距之和
3.如果兩個外邊距都為負數(shù)，折疊后邊距為較小的邊距
解決方案：解決方法實際上也就是阻止外邊距直接接觸
第一種、第三種：只有靜態(tài)流的元素才會發(fā)生外邊距合并故設(shè)置float position inline-block都可以
<style>.bother{ width: 50px; height: 50px; margin: 50px; background-color: #44cc00; /*1.float: left;*/ /*2.position: absolute;*/ <!--3.display: inline-block;--> } /*.father{*/ /*2.position: relative;*/ /*background:#cccdd1;*/ /*}*/ /*.bother1{*/ /*2.top:50px;*/ /*}*/ /*.bother2{*/ /*2.top:250px;*/ /*}*/</style><body><div class="father"><div class="bother1 bother"></div><div class="bother2 bother"></div></div></body>第二種（嵌套的情況）只要border padding非0或者有inline元素隔開，比如在父元素里加一行文字也可以
<style> .margin-box{ width: 50px; height: 50px; /*margin: 50px;設(shè)置了上下左右的外邊距*/ margin: 50px; /*margin-left: 50px;*/ /*margin-right: 50px;*/ /*div是塊級元素，所以設(shè)置左右外邊距也不會使父元素有左右外邊距*/ background-color: #fae900; /*5.2 display: inline-block;*/ } .father{ <!--3.overflow: hidden;--> background:#cccdd1; /*1.border: 1px solid;*/ /*2.padding: 20px;*/ /*5.1 display: inline-block;*/ /*如果沒有border和padding只有測試這個字，那么子元素的外邊距不會在父元素里顯示*/ /*而僅僅只有上外邊距顯示，下外邊距不顯示*/ /*而如果在子元素下面同樣寫一個測試，那么下外邊距也會顯示*/ } </style></head><body><div class="father"> <!--4.<span>測試</span>--> <div class="margin-box"></div> <!--4.<span>測試</span>--></div></body>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
