margin -------總結（block inline 可置換元素）

margin在塊元素、內聯元素中的區別

block元素（塊元素）大體有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨着html5標準的推動，一些元素將被廢除，而一些新的元素將被引入)注意的是並不是全部的block元素的默認display屬性都是block，像table這種display:table的元素也是block元素。

inline元素（內聯元素）大體有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

其中有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱爲可置換元素（Replaced element）。他們區別通常inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們能夠設置width/height屬性。他們的性質同設置了display:inline-block的元素一致（margin依舊能夠影響到他的上下左右）。

margin在塊級元素下，他的性能能夠徹底體現，上下左右任你設定。且記住塊級元素的margin的參照基準：前一個元素即相對於自身以前的元素有margin距離。若是元素是第一個元素，則就是相對於父元素的margin距離

（但第一個元素相對於父元素margin-top而父元素又沒有設定padding-top/border-top的話要須要印證上面的垂直外邊距合併的知識）

margin也能用於內聯元素，這是規範所容許的，可是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，而且因爲邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。

不過margin-left/margin-right仍是可以對內聯元素產生影響的。

應用margin:10px 20px 30px 40px;，左邊這個css若是寫在inline元素上，他的效果大體是，上下無效果，左邊離他相鄰元素或者文本距離爲40px，右邊離他相鄰元素或者文本距離爲20px。你能夠自行嘗試一番。

最後在內聯元素中還有上文咱們提到的非可置換inline元素（non-replaced element），這些個元素img|input|select|textarea|button|label雖然是內聯元素，但margin依舊能夠影響到他的上下左右！

 

margin外邊距合併：（只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。）

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距合併（疊加）是一個至關簡單的概念。可是，在實踐中對網頁進行佈局時，它會形成許多混淆。

簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

兩個垂直的元素就是兄弟元素：

.div1{ 
width:200px;
 height:100px;
 background-color:red;
border:1px solid red; 
margin-bottom:20px;
}
.div2{ 
width:200px;
 height:100px;
 background-color:blue;
border:1px solid blue; 
margin-top:30px;
}
<div class="div1"></div>
<div class="div2"></div>

　　

div1和div2之間的間距是30px，去二者之間的最大者，無論兩個元素是否有邊框

 

 

兩個div之間是父子關係：

若是二者之間沒有border和padding。也會出現外邊距合併的狀況（不然不會出現外邊距合併的狀況）

根據規範，一個盒子若是沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

再說了白點就是：父元素的第一個子元素的上邊距margin-top若是碰不到有效的border或者padding.就會不斷一層一層的找本身「領導」(父元素，祖先元素)的麻煩。

只要給領導設置個有效的 border或者padding就能夠有效的管制這個目無領導的margin防止它越級，假傳聖旨，把本身的margin當領導的margin執行

.content{
              width:600px;
              margin: 0 auto;
              border: 1px solid #000;
          }

          .info{
              margin-top:20px;
              background-color: red;
              width:200px;
              height:100px;

              margin-bottom:20px;
          }
          .info1{
              margin-top:30px;
              background-color: blue;
              border: 1px solid blue;
              width:100px;
              height:50px;
          }
<div class="content">
    <div class="info">
        <div class="info1"></div>
    </div>
</div>

　　

父元素margin-top爲30px,發生外邊距合併的狀況

p {margin : 10%;}

百分數是相對於父元素的 width 計算的。上面這個例子爲 p 元素設置的外邊距是其父元素的 width 的 10%。

 

一個完整的margin屬性是這麼寫的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。

在margin屬性中一共有兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另外一類。

top和left是以外元素爲參考，right和bottom是以元素自己爲參考。

margin的位移方向是指margin數值爲正值時候的情形，若是是負值則位移方向相反。

 

總結下來margin 屬性能夠應用於幾乎全部的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，

並且垂直外邊距對非置換內聯元素（non-replaced inline element）不起做用。

 

BFC（Block Formatting Contexts ） 會阻止外邊距摺疊

• 浮動元素，float 除 none 之外的值
• 絕對定位元素，position（absolute，fixed）
• display 爲如下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 之外的值（hidden，auto，scroll）

 

總結參考：http://www.hicss.net/do-not-tell-me-you-understand-margin/