如何在css中折疊外邊距

本篇內(nèi)容介紹了“如何在css中折疊外邊距”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

先看一個(gè)簡(jiǎn)單示例：

<style>
    .slide1 div {
      margin:10px 0;
    }
  </style>
 <div class="slide1">
    <h4>第1種外邊距折疊：兄弟元素</h4>
    <p>文本上下間距10px</p>
    <p>文本上下間距10px</p>
  </div>

看這個(gè)例子中的兩個(gè)p標(biāo)簽，根據(jù)樣式定義：第一個(gè)p的margin-bottom和第二個(gè)p的margin-top 都是10px，那實(shí)際距離應(yīng)該等于20px才對(duì)，但是用瀏覽器查看一下可以發(fā)現(xiàn)，最終的邊距是10px。 這個(gè)例子就是外邊距折疊：塊級(jí)元素的上外邊距和下外邊距有時(shí)會(huì)合并（或折疊）為一個(gè)外邊距。

分類情況

外邊距折疊有3種基本情況：

1. 相鄰元素

2. 父元素和第一個(gè)子元素（或者最后一個(gè)子元素，等下記得回頭思考下這里為啥是第一個(gè)或者最后一個(gè)）

3. 空的塊級(jí)元素

先不急著記憶，首先，前文的例子中就是第一種情況--相鄰的兩個(gè)元素之間發(fā)生的外邊距折疊。

第二種和第三種情況如下：

<style>
    .father {
      background-color: green;

    }
    .child {
      margin-top: 50px;
      background-color: red;
      height: 300px;
    }
    
      .slide3 {
      margin: 10px 0;
    }
  </style>
  <h4>第2種外邊距折疊：父元素和首個(gè)子元素</h4>
  <div class="slide2 father">
    <!-- 父元素是綠色 -->
    <div class="slide2 child">
      <!-- 子元素是紅色 -->
    </div>
  </div>
  <h4>第3種外邊距折疊：空的塊級(jí)元素</h4>
  <div class="slide3"></div>

他們的圖像也分別如圖：

情況2： 子元素的外邊距會(huì)“轉(zhuǎn)移”到父元素的外面

情況3：該元素的上下外邊距會(huì)折疊

好了，到這里我們不妨來(lái)看看這幾種情況的共同點(diǎn)（建議畫(huà)一下他們的盒模型，我懶就不畫(huà)了-_-）,可以發(fā)現(xiàn)發(fā)生外邊距折疊的共同原因：margin之間直接接觸，沒(méi)有阻隔。

如何理解直接接觸？很簡(jiǎn)單：

• 第一個(gè)例子中，兩個(gè)<p>標(biāo)簽的垂直方向margin是直接接觸的；

• 第二個(gè)例子中，由于父元素的padding,border都為0，所以margin和它的子元素也是直接接觸的。（這個(gè)例子畫(huà)出盒模型就很好理解）

• 第三個(gè)例子中，空元素本身的上下邊距也是直接接觸的（padding,border也是0）

各種情況下折疊的結(jié)果

折疊后的邊距如何計(jì)算，這個(gè)可以簡(jiǎn)單驗(yàn)證下：

• 如果兩個(gè)外邊距都是正值，折疊后的邊距取較大的一個(gè)

• 如果兩個(gè)邊距一正一負(fù)，折疊后的邊距為邊距之和

• 如果兩個(gè)邊距都為負(fù)數(shù)，折疊后邊距為較小的邊距之和

如何防止外邊距折疊

前文說(shuō)到，發(fā)生外邊距折疊的原因是，外邊距直接接觸，因此防止折疊的方式就是，阻隔這個(gè)直接接觸，組合的方法包括：

• 嵌套情況只要border padding 非0，或者有inline元素隔開(kāi)，比如父元素里加一行文字也可以（可以直接在情況2嘗試）

• 任何借助bfc形成阻隔的方式，如浮動(dòng)，display:table等（BFC不熟悉的同學(xué)先查查，我后面補(bǔ)上）

“如何在css中折疊外邊距”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

本文題目：如何在css中折疊外邊距
標(biāo)題鏈接：http://muchs.cn/article36/gpjosg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、網(wǎng)站改版

廣告

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