我們曾經在HTML篇章討論block元素與inline元素時，粗淺提到margin重疊。既然已經知道box model，終於可以來認識什麼是Collapsing margins。

在CSS規範中對Collapsing margins的描述是：

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

這意思是相連的box（可能是兄弟元素box或父子層關係的元素box），它們相鄰的margin重疊成一個margin。

Margin collapse現象的特性如下：

1. 在in-flow（普通流）裡的元素，而且參與同一個BFC（該概念會在之後介紹），所以下列情況不會發生margin collapse：
   • float元素
   • position為absolute的元素
   • root element（根元素）
2. 相連元素沒有padding、border、clearfix、和line box隔開。
3. 垂直排列的margin:
   • 相鄰兄弟元素的margin-bttom跟margin-top。
   • 父元素跟第一個子元素的margin-top。
   • 父元素跟最後一個子元素的margin-bottom。
4. 重疊後的值會取大的margin值。

範例

• 相鄰兄弟元素的margin-bttom跟margin-top

  我們知道了margin在box model裡，通常是用來區隔元素跟元素距離，而某些HTML元素在預設值上就會有margin，我們可以拿<h1>元素跟<p>元素來示範兄弟元素的margin重疊現象。

  <h1>我是標題我是標題</h1>
  <p>我是段落我是段落我是段落我是段落</p>
  

  用開發者介面來看margin的區域：
  

  

  • <h1>元素的margin預設值是上下21.44px。
  • <p>元素的margin預設值是上下16px。
  • <h1>的margin-bottom跟<p>的margin-top重疊成一個margin。
  • 重疊後的margin值是21.44px，collapsing margin會留下比較大的margin值。

• 父元素跟第一個子元素的margin-top

  父元素跟第一個子元素，它們垂直相鄰的margin-top會重疊。我們設父元素margin-top:50px，然後子元素margin-top:10px：

  .outer {
      outline: 5px solid #000;
      width: 300px;
      height: 100px;
      margin-top: 50px;
  }
  
  .inner {
      width: 200px;
      height: 50px;
      margin: auto;
      background-color: pink;
      margin-top: 10px;
  }
  
  

  原本期待.inner的margin-top: 10px可以讓子元素外邊緣跟父元素的內邊緣中間隔開10px。可是並沒有如願以償。
  
  因為它的margin-top跑到外面去跟父層的margin-top重疊在一塊了。
  

• 父元素跟最後一個子元素的margin-bottom
  最後一個子元素的margin-bottom也跟父元素的margin-bottom垂直相鄰，所以它們各自的margin-bottom也會發生margin collapse現象，並取比較大的margin值。

了解margin collapse現象，可以讓我們在遇到這個情況時，知道為什麼margin值不照我們的想像走。其實margin collapse在標題元素跟段落元素時，是很方便的，它會自動幫我們重疊margin，才不會發生標題跟段落距離太遠的情況。

然而在其它時候可能會覺得困擾。但我們知道這個現象之後，可以改用padding避免margin collapse，順利設定兩個元素間的距離。

今天的筆記告一段落，明天見～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。