這篇文章主要介紹css外邊距合并的解決方法,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器,站群服務(wù)器,達(dá)州電信機(jī)房,海外高防服務(wù)器,服務(wù)器機(jī)柜,動(dòng)態(tài)撥號(hào)VPS,海外云手機(jī),海外云服務(wù)器,海外服務(wù)器租用托管等。
我們先來(lái)css外邊距合并具體是什么意思?
css外邊距合并(疊加)是指兩個(gè)垂直相鄰的塊級(jí)元素,當(dāng)上下兩個(gè)邊距相遇時(shí),起外邊距會(huì)產(chǎn)生重疊現(xiàn)象,且合并后的外邊距,等于其中較大者。如圖:
或者是一個(gè)無(wú)內(nèi)容的空元素,其自身上下邊距也會(huì)產(chǎn)生合并。如圖:
既然知道了css外邊距合并的具體情況后,我們就來(lái)看看怎么解決css外邊距合并的情況。
防止css外邊距合并解決方法:
1、防止元素與子元素margin重疊:
用內(nèi)層元素的margin通過(guò)外層元素的padding代替;
內(nèi)層元素透明邊框 border:20px solid transparent或者父元素background-color;
外層元素 overflow:hidden;或者overflow:auto;
2、防止元素與子元素、與父元素。與相鄰元素的重合:
設(shè)置元素絕對(duì)定位 postion:absolute;或float:left;或display:inline-block;
以上是css外邊距合并的解決方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!