前面的話
margin是盒模型幾個屬性中一個非常特殊的屬性。簡單舉幾個例子：只有margin不顯示當前元素背景，只有margin可以設置為負值，margin和寬高支持auto，以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介紹外邊距margin的幾個重點部分，包括重疊、auto和無效情況
重疊
【前提】
margin重疊又叫margin合并，發生這種情況有兩個前提
1、只發生在block元素上(不包括float、absolute、inline-block元素)
2、只發生在垂直方向上(不考慮writing-mode)
【分類】
margin重疊共包括以下3種情況
1、相鄰的兄弟元素
<style>
p{
line-height: 2em;
margin:1em 0;
background-color: lightblue;
display:inline-block;
width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>2、父級元素和第一個或最后一個子元素，父子級的margin重疊又叫margin傳遞
<style>
.box{
background-color: pink;
height:30px;
}
.inner{
margin-top: 1em;
background-color: lightblue;
}
</style>
<div class="box">
<div class="inner">子級</div>
</div> 條件
相對比相鄰兄弟元素margin重疊來說，父子級margin重疊需要滿足以下幾個條件(以margin-top重疊為例)：
a、父元素不是BFC元素
b、父元素沒有padding-top值
c、父元素沒有border-top值
d、父元素和第一個子元素之間沒有inline元素分隔
如果是父子級的margin-bottom重疊，第d條改為父元素和最后一個子元素之間沒有inline元素分隔，以及還需要滿足父元素沒有height、min-height、max-height限制
3、空的block元素
<style>
.box{
background-color: lightgreen;
overflow: hidden;
}
.void{
margin: 1em 0;
}
</style>
</head>
<body>
<div class="box">
<div class="void"></div>
</div>
一行文字從下面結果中，可以看出空block元素應該撐開父級margin-top+margin-bottom共2em的高度，但由于margin重疊，只有1em
同樣地，空block元素發生margin重疊也需要滿足一些條件
a、元素沒有border值
b、元素沒有padding值
c、里面沒有inline元素
d、沒有height或min-height
【規則】
兩個正垂直外邊距，瀏覽器取大值；如果垂直外邊距都設置為負值，瀏覽器會選取兩個外邊距的絕對值的最大值；如果一個正外邊距與一個負外邊距合并，會從正外邊距減去這個負外邊距的絕對值
簡單點說，就是正正取大值、正負值相加、負負最負值
【用途】
在網頁布局中，因為margin重疊的原因，我們常常把margin作為一個“問題樣式”而盡量少地使用它。但實際上，它是在很大的作用的
HTML文檔創建的初衷只是用來展示信息的。HTML文檔只使用默認樣式的前提下，如果上下margin不發生重疊，則會出現以下幾個問題：1、連續段落或列表之類，如果沒有margin重疊，首尾項間距會和其他兄弟元素呈現1:2的關系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都會影響原生的布局，與web設計原則相違背；3、遺落的空的任意多個p標簽，會影響原來的閱讀排版
所以，我們要善用重疊，可以在列表項中同時使用margin-top和margin-bottom。這樣，使頁面結構更具有健壯性，最后一個元素移除或位置調換，都不會破壞原生的布局
【新屬性】
-webkit-margin-collapse
-webkit-margin-collapse: <collapse>(默認重疊) | <discard>(取消) | <separate>(分隔)該屬性用于設置margin是否重疊，作用于發生margin重疊的兩個元素之一。如果，兩個都使用該屬性，一個設置為discard，一個設置為separate，則最終效果為重疊collase
auto
只有width/height和margin可以設置auto。關于auto的詳細信息，已經在CSS視覺格式化中詳細介紹過。下面僅介紹關于margin:auto的部分
【為什么margin:auto無法實現垂直居中】
水平方向可以居中是因為塊級元素的寬度默認是撐滿父級元素的，如果給寬度設置一個固定值，而左右margin設置為auto，則可以平分剩余空間
垂直方向不可以居中是因為塊級元素的高度默認是內容高度，與父級元素的高度并沒有直接的關系，而上下margin設置為auto，則被重置為0
【為什么圖片使用margin:auto不能水平居中】
圖片無法水平居中，類似于塊級元素無法垂直居中。因為圖片的寬度width默認是自身寬度，與父元素的寬度沒有直接關系。左右margin設置為auto，會被重置為0
所以，圖片要水平居中，需要設置為display:block元素
【實現垂直居中】
使用margin:auto實現垂直居中，有以下兩種方法
1、使用writing-mode:vertical-lr;
writing-mode代表頁面流方向，默認是水平方向。改為垂直方向后，可實現垂直居中，但水平不居中了
2、將元素變為絕對定位元素(IE7-瀏覽器不支持)
將元素變為絕對定位元素后，設置top:0;bottom:0;，使絕對定位元素與定位父級的高度有了直接的聯系。再設置margin:0 auto;，使margin-top和margin-bottom平分剩余空間，達到垂直居中的效果
無效情形
1、行內元素垂直margin無效
因為行內元素垂直布局主要是通過行高line-height和垂直對齊vertical-align來影響的，垂直margin并不會影響它們，所以不會影響垂直布局。而在顯示方式，margin區域不會顯示元素背景，所以也不會影響自身元素的顯示，所以行內元素垂直margin無效
[注意]不包括inline-block或設置writing-mode為vertical-lr的情況
2、某些表格類元素margin無效
<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>不可設置margin。對于display屬性來說，display為table相關類型(不包括table-caption、table、inline-table)，margin聲明無效
3、絕對定位元素非定位方向的margin值看似無效
絕對定位的margin值是一直有效的，只是因為絕對定位元素是脫離文檔流的，與其他元素節點沒有什么關系，所以看不出效果
4、BFC造成的margin看似無效
左側元素使用浮動，右側元素使用overflow-hidden實現兩欄自適應的布局時，右側元素的margin-left值只有足夠大，才能看到效果。這是因為margin-left是相對于父元素左側，而不是圖片右側
5、內聯特性導致的margin無效
一個div里面包著一張圖片，當圖片的margin-top小到一定值時，圖片就不再接著向上移動了。這是因為圖片是內聯元素，它受制于內聯元素vertical-align對齊特性的影響。默認基線對齊。以頁面假想的大寫X字符為例，X是不會因為圖片margin-top足夠小而跑到父元素外面的，所以圖片移動到一定位置就不再接著向上移動了
文章列表
留言列表
