小編給大家分享一下margin重疊怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、遂川ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的遂川網(wǎng)站制作公司

把這部分總結(jié)到這里啦~

下面的幾個部分應(yīng)該是margin重疊問題的所有情況了：

1、兩個普通元素上下的margin會合并為一個margin，哪個大選哪個！

兩個浮動元素不會出現(xiàn)margin傳遞的問題，依然是上面元素的margin-bottom和下面元素的margin-top相加作為兩者之間的margin值。

2、兩個元素如果是包含關(guān)系，父元素和子元素上下margin值也會合并

當(dāng)父元素不加邊框，不設(shè)置寬高，即父級沒有觸發(fā)haslayout時	IE6、7和標(biāo)準(zhǔn)瀏覽器下，均會發(fā)生margin傳遞問題子元素和父元素的高度相同（子元素的top將和父元素的top在一條直線上，bottom將和父元素的bottom在一條直線上）而父元素則選擇兩者之間大的數(shù)值作為父元素的margin-top值和margin-bottom值?。?！ 子元素的margin-left和margin-right值依然存在
當(dāng)父元素不加邊框，但是，設(shè)置寬或高或zoom：1；即父級加可以觸發(fā)haslayout的屬性時	標(biāo)準(zhǔn)瀏覽器下，會發(fā)生margin傳遞但是在IE6、7下則不會發(fā)生margin傳遞（即子元素的margin就是相對于父元素的，不會傳遞給父級）
當(dāng)父級加邊框，并且父級沒有觸發(fā)haslayout時	標(biāo)準(zhǔn)瀏覽器下，不會發(fā)生margin傳遞IE6、7下，子元素的margin徹底消失！
當(dāng)父級加邊框，并且父級觸發(fā)haslayout（即加width或height或zoom：1）時，	IE6、7和標(biāo)準(zhǔn)瀏覽器下，都不會發(fā)生margin傳遞?。。?/td>

對于IE6、7來說：

即只要觸發(fā)haslayout，不管給不給父元素加邊框，不管標(biāo)準(zhǔn)瀏覽器會不會發(fā)生margin傳遞，IE6、7下都不會發(fā)生margin傳遞?。?！

而對于標(biāo)準(zhǔn)瀏覽器來說：

只有加邊框才能避免margin傳遞?。?！

給父元素添加邊框，則子元素和父元素之間的margin就有分割線了，此時將不會發(fā)生合并現(xiàn)象了！如果給子元素添加邊框兩者的margin值還是沒有被分開，所以依然還會發(fā)生重疊現(xiàn)象！

如果這里父元素里包含了多個塊子元素，則每個子元素之間滿足上下margin重疊，選擇兩者較大的margin作為兩者之間的margin，第一個子元素的top和父元素重疊（左圖上面白色距瀏覽器頂?shù)陌咨珔^(qū)域即是），最后一個子元素的bottom和父元素重疊。IE6、7和標(biāo)準(zhǔn)瀏覽器顯示效果均如左圖。

此時，如果兩個塊元素是浮動元素，那么，那么就不存在子元素和父元素的margin傳遞情況，此時，上下的margin值則是兩者之間的各自margin值相加！標(biāo)準(zhǔn)瀏覽器顯示如下圖中，IE6顯示如下圖右。但為什么顯示有差異呢？

因?yàn)?，額滴神啊！一波未平一波又起！塊狀元素和橫向margin和浮動三者引發(fā)了IE6的新的兼容性問題——雙邊距bug（注意IE7沒有雙邊距bug?。。。。?/p>

由此

實(shí)踐時，首先一定要給父元素加觸發(fā)haslyout的屬性！這一條保證了在IE6、7下不出現(xiàn)margin傳遞問題和margin值消失問題；

然后，考慮在標(biāo)準(zhǔn)瀏覽器下，給子元素加浮動可以解決沒有border時出現(xiàn)的margin傳遞問題，但是此時加浮動后會造成IE6的雙邊距bug，所以我們實(shí)踐時盡量將浮動的塊狀元素的margin換為padding，如果實(shí)在不能換就給該元素加display:inline;！

3、兩個Div（A、B）上下之間沒有margin值，但是A中有子元素有margin，這時該子元素的margin值會傳遞到兩者間，會使A、B兩個元素之間填充上margin，僅限垂直方向！！！

對于這個問題，大概就是這樣啦，其實(shí)也很簡單，只是我把所有的情況列出來了，其實(shí)綜合起來就是上面總結(jié)部分的內(nèi)容。

我感覺這個margin傳遞和重疊都是因?yàn)閮烧叩膍argin值之間沒有邊框或者是padding將margin這一空白區(qū)域隔開！?。?！

以上是margin重疊怎么辦的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：margin重疊怎么辦
標(biāo)題URL：http://aaarwkj.com/article28/jjjgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、移動網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)