margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子：只有margin不顯示當前元素背景，只有margin可以設定為負值，margin和寬高支援auto，以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介紹外邊距margin的幾個重點部分，包括重疊、auto和無效情況
【前提】
margin重疊又叫margin合併，發生這種情況有兩個前提
1、只發生在block元素上(不包括float、absolute、inline-block元素)
2、只發生在垂直方向上(不考慮writing-mode)
【分類】
margin重疊共包括以下3種情況
1、相鄰的兄弟元素
兄弟一
兄弟二
2、父級元素和第乙個或最後乙個子元素，父子級的margin重疊又叫margin傳遞
子級
條件
相對比相鄰兄弟元素margin重疊來說，父子級margin重疊需要滿足以下幾個條件(以margin-top重疊為例)：
a、父元素不是bfc元素
b、父元素沒有padding-top值
c、父元素沒有border-top值
d、父元素和第乙個子元素之間沒有inline元素分隔
如果是父子級的margin-bottom重疊，第d條改為父元素和最後乙個子元素之間沒有inline元素分隔，以及還需要滿足父元素沒有height、min-height、max-height限制
style="width: 100%; height: 350px" src="" allowfullscreen frameborder="0">
3、空的block元素
一行文字
style="width: 100%; height: 60px" src="" allowfullscreen frameborder="0">
同樣地，空block元素發生margin重疊也需要滿足一些條件
a、元素沒有border值
b、元素沒有padding值
c、裡面沒有inline元素
d、沒有height或min-height
【規則】
兩個正垂直外邊距，瀏覽器取大值；如果垂直外邊距都設定為負值，瀏覽器會選取兩個外邊距的絕對值的最大值；如果乙個正外邊距與乙個負外邊距合併，會從正外邊距減去這個負外邊距的絕對值
簡單點說，就是正正取大值、正負值相加、負負最負值
style="width: 100%; height: 384px;" src="" frameborder="0" width="320" height="240">
【用途】
在網頁布局中，因為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: (預設重疊) | (取消) | (分隔)style="width: 100%; height: 380px" src="" allowfullscreen frameborder="0">只有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無效
``````````````3、絕對定位元素非定位方向的margin值看似無效
絕對定位的margin值是一直有效的，只是因為絕對定位元素是脫離文件流的，與其他元素節點沒有什麼關係，所以看不出效果
4、bfc造成的margin看似無效
左側元素使用浮動，右側元素使用overflow-hidden實現兩欄自適應的布局時，右側元素的margin-left值只有足夠大，才能看到效果。這是因為margin-left是相對于父元素左側，而不是右側
style="width: 100%; height: 170px" src="" allowfullscreen frameborder="0">
5、內聯特性導致的margin無效
乙個div裡麵包著一張，當的margin-top小到一定值時，就不再接著向上移動了。這是因為是內聯元素，它受制於內聯元素vertical-align對齊特性的影響。預設基線對齊。以頁面假想的大寫x字元為例，x是不會因為margin-top足夠小而跑到父元素外面的，所以移動到一定位置就不再接著向上移動了
style="width: 100%; height: 240px" src="" allowfullscreen frameborder="0">
理解CSS外邊距margin
margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子 只有margin不顯示當前元素背景，只有margin可以設定為負值，margin和寬高支援auto，以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介...
理解CSS外邊距margin
margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子 只有margin不顯示當前元素背景，只有margin可以設定為負值，margin和寬高支援auto，以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介...
margin外邊距合併
之前遇到了乙個問題 title 無標題文件 styletype text css body div body div 這是外邊距合併造成的問題。外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。body和div的上外邊距合併了...