今天就跟大家聊聊有關(guān)如何在CSS中防止外邊距重疊，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

在做網(wǎng)站、網(wǎng)站制作中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營銷成為有效果、有回報(bào)的無錫營銷推廣。創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設(shè)10余年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

但是邊界的重疊也有例外情況：

1、水平邊距永遠(yuǎn)不會(huì)重合。

2、在規(guī)范文檔中，2個(gè)或以上的塊級(jí)盒模型相鄰的垂直margin會(huì)重疊。最終的margin值計(jì)算方法如下：

a、全部都為正值，取較大者；

b、不全是正值，則都取絕對(duì)值，然后用正值減去較大值；

c、沒有正值，則都取絕對(duì)值，然后用0減去較大值。

注意：相鄰的盒模型可能由DOM元素動(dòng)態(tài)產(chǎn)生并沒有相鄰或繼承關(guān)系。

3、相鄰的盒模型中，如果其中的一個(gè)是浮動(dòng)的（float），垂直margin不會(huì)重疊，并且浮動(dòng)的盒模型和它的子元素之間也是這樣。

4、設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。

5、設(shè)置了絕對(duì)定位（position:absolute）的盒模型，垂直margin不會(huì)被重疊，并且和他們的子元素之間也是一樣。

6、設(shè)置了display:inline-block的元素，垂直margin不會(huì)重疊，甚至和他們的子元素之間也是一樣。

7、如果一個(gè)盒模型的上下margin相鄰，這時(shí)它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。

a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。

b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計(jì)算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。

一個(gè)應(yīng)用了清除操作的元素的margin-top絕不會(huì)和它的塊級(jí)父元素的margin-bottom重疊。

注意，那些已經(jīng)被重疊覆蓋的元素的位置對(duì)其他已經(jīng)重疊的元素的位置沒有任何影響；只有在對(duì)這些元素的子元素定位時(shí)，border-top邊界位置才是必需的。

8、根元素的垂直margin不會(huì)被重疊。

外邊距(margin)重疊示例

外邊距重疊是指兩個(gè)垂直相鄰的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，起外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。

為了幫助大家讓學(xué)習(xí)變得輕松、高效，給大家免費(fèi)分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這里給大家推薦一個(gè)前端全棧學(xué)習(xí)交流圈：784783012 歡迎大家進(jìn)群交流討論，學(xué)習(xí)交流，共同進(jìn)步。

當(dāng)真正開始學(xué)習(xí)的時(shí)候難免不知道從哪入手，導(dǎo)致效率低下影響繼續(xù)學(xué)習(xí)的信心。

但最重要的是不知道哪些技術(shù)需要重點(diǎn)掌握，學(xué)習(xí)時(shí)頻繁踩坑，最終浪費(fèi)大量時(shí)間，所以有效資源還是很有必要的。

圖示：

另一個(gè)重疊現(xiàn)象是當(dāng)一個(gè)元素包含在另一個(gè)元素之中時(shí)，子元素與父元素之間也會(huì)產(chǎn)生重疊現(xiàn)象，重疊后的外邊距，等于其中較大者：

同理，如果一個(gè)無內(nèi)容的空元素，其自身上下邊距也會(huì)產(chǎn)生重疊。

 

外邊距重疊的意義

外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個(gè)看起來有點(diǎn)奇怪的規(guī)則，其實(shí)有其現(xiàn)實(shí)意義。設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級(jí)元素（如段落P）時(shí)，那么塊元素之間因?yàn)橥膺吘嘀丿B的存在，段落之間就不會(huì)產(chǎn)生雙倍的距離。

防止外邊距重疊解決方案：

雖然外邊距的重疊有其一定的意義，但有時(shí)候我們在設(shè)計(jì)上卻不想讓元素之間產(chǎn)生重疊，那么可以有如下幾個(gè)建議可供參考：

1. 外層元素padding代替

2. 內(nèi)層元素透明邊框 border:1px solid transparent;

3. 內(nèi)層元素絕對(duì)定位 postion:absolute:

4. 外層元素 overflow:hidden;

5. 內(nèi)層元素 加float:left;或display:inline-block;

6. 內(nèi)層元素padding:1px;

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

看完上述內(nèi)容，你們對(duì)如何在CSS中防止外邊距重疊有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站題目：如何在CSS中防止外邊距重疊-創(chuàng)新互聯(lián)
標(biāo)題URL：http://aaarwkj.com/article38/ishpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)、小程序開發(fā)、虛擬主機(jī)

廣告

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