CSS 語法 margin 的互相抵消(Collapsing margins)

CSS 語法的 margin 在區塊層級 (block level) 元件之間，他的上下 margin 會互相抵消，而在行內層級元件 (display: inline-block;) 或是與 float 相關的元件則不會發生這樣的情形，W3C 稱之為「Collapsing margins」。

相鄰的 margin 互相抵消：

1. HTML:
   <div class="box"></div>
   <div class="box"></div>
   
   CSS:
   .box {
     margin:20px;
   }
   
   
   
   
   
2. HTML:
   <div class="box"></div>
   <div class="box-large"></div>
   
   CSS:
   .box {
     margin:20px;
   }
   .box-large {
     margin:30px;
   }
   
   
   

子元件的 margin 互相抵消

HTML:

<div class="parent">
  <div class="child"></div>

</div>

CSS:

.parent {

  width:200px;

  height:100px;

}

.child {

  width:66%;

  height:50%;

  margin-top:20px;

}

Collapsing margins 解決方案

要處理這種互相抵消的情況，可以使用 padding、border、inline-block 及 float 內容來做區分。

1. 透過外元素的 padding
   .parent {
      padding-top: 1px;
   }
   
   
2. 外元素加入 border
   .parent {
     border: 1px solid #fff;
   }
3. 內元素更改屬性 (inline-block)
   .child {
     display: inline-block;
   }
4. 內元素更改屬性 (float)
   .child{
     float: left;
   }