詳解css外邊距折疊(margin collapsing)

  發布時間:2018-10-30 15:21:07   作者:安歌   我要評論

外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距,本文詳細的介紹了一下css外邊距折疊的實現,分為3種情況,非常具有實用價值,需要的朋友可以參考下

前文

這是的一個經典的老問題,因為之前剛好有讀者朋友問到,順便整理一下。

從一個簡單例子說起

先看一個簡單示例:

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

看這個例子中的兩個p標簽,根據樣式定義:第一個pmargin-bottom和第二個pmargin-top 都是10px,那實際距離應該等于20px才對,但是用瀏覽器查看一下可以發現,最終的邊距是10px。 這個例子就是外邊距折疊:塊級元素的上外邊距和下外邊距有時會合并(或折疊)為一個外邊距。

分類情況

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

  1. 相鄰元素
  2. 父元素和第一個子元素(或者最后一個子元素,等下記得回頭思考下這里為啥是第一個或者最后一個)
  3. 空的塊級元素

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

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


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

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

他們的圖像也分別如圖:

情況2: 子元素的外邊距會“轉移”到父元素的外面

情況3:該元素的上下外邊距會折疊

好了,到這里我們不妨來看看這幾種情況的共同點(建議畫一下他們的盒模型,我懶就不畫了-_-),可以發現發生外邊距折疊的共同原因:margin之間直接接觸,沒有阻隔。

如何理解直接接觸?很簡單:

  • 第一個例子中,兩個<p>標簽的垂直方向margin是直接接觸的;
  • 第二個例子中,由于父元素的padding,border都為0,所以margin和它的子元素也是直接接觸的。(這個例子畫出盒模型就很好理解)
  • 第三個例子中,空元素本身的上下邊距也是直接接觸的(padding,border也是0)

各種情況下折疊的結果

折疊后的邊距如何計算,這個可以簡單驗證下:

  • 如果兩個外邊距都是正值,折疊后的邊距取較大的一個
  • 如果兩個邊距一正一負,折疊后的邊距為邊距之和
  • 如果兩個邊距都為負數,折疊后邊距為較小的邊距之和

如何防止外邊距折疊

前文說到,發生外邊距折疊的原因是,外邊距直接接觸,因此防止折疊的方式就是,阻隔這個直接接觸,組合的方法包括:

  • 嵌套情況只要border padding 非0,或者有inline元素隔開,比如父元素里加一行文字也可以(可以直接在情況2嘗試)
  • 任何借助bfc形成阻隔的方式,如浮動,display:table等(BFC不熟悉的同學先查查,我后面補上)

小結

還得補充一下,前面討論的是基本情況,在基本情況下還可以進行組合,比如多個相鄰元素之間;多層后代元素嵌套等等,弄明白基本原理,其他情況只要寫寫小的demo驗證下就很好理解了。然后是慣例:如果內容有錯誤的地方歡迎指出(覺得看著不理解不舒服想吐槽也完全沒問題);

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

原文地址:https://segmentfault.com/a/1190000016842993

相關文章

  • CSS去除移動端點擊時元素產生的背景色 (推薦)

    這篇文章主要介紹了CSS去除移動端點擊時元素產生的背景色 (推薦),代碼很簡單,需要的朋友跟隨小編一起看看吧
    2018-10-30
  • 詳解css外邊距折疊(margin collapsing)

    外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距,本文詳細的介紹了一下css外邊距折疊的實現,分為3種情況,非常具有實用價值,需要的朋友可以參考下
    2018-10-30
  • 使用CSS transition和animation改變漸變狀態的實現方法

    CSS漸變特性對于我們的幫助已經非常強大了,它們可以幫助我們繪圖、 創建圖片占位符 、制作環形進度條等等。接下來通過本文給大家介紹使用CSS transition和animation改變漸
    2018-10-29
  • css中grid屬性的使用詳解

    這篇文章主要介紹了css中grid屬性的使用詳解的相關資料,詳細的介紹了grid屬性,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-26
  • 純css實現Material Design中的水滴動畫按鈕

    這篇文章主要介紹了純css實現Material Design中的水滴動畫按鈕的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-26
  • Flexbox 布局的最簡單表單的實現

    彈性布局(Flexbox)逐漸流行,越來越多人使用,本文章主要介紹了Flexbox 布局的最簡單表單的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過
    2018-10-25
  • 詳解關于flex-shrink如何計算的冷知識

    本篇文章給大家帶來的內容是關于flex-shrink如何計算?flex-shrink的計算方法介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助
    2018-10-25
  • 詳解flex多列布局遇到的問題和解決方案

    flex布局無疑是簡單、易用的,他讓我我們的布局更加簡單和快速,這篇文章主要介紹了詳解flex多列布局遇到的問題和解決方案 ,非常具有實用價值,需要的朋友可以參考下
    2018-10-24
  • 使用css實現物流進度的樣式的實例代碼

    本文通過實例代碼給大家介紹了使用css實現物流進度的樣式,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-10-23
  • css實現中間文字兩邊橫線效果

    這篇文章主要介紹了css實現中間文字兩邊橫線效果 ,需要的朋友可以參考下
    2018-10-23

最新評論

时时彩包赢公式0369