理解CSS外邊距margin

margin是盒模型幾個屬性中乙個非常特殊的屬性。簡單舉幾個例子：只有margin不顯示當前元素背景，只有margin可以設定為負值，margin和寬高支援auto，以及margin具有非常奇怪的重疊特性。之前的博文中已經分別詳細地介紹了margin的基礎知識和負margin的詳細用法。本文將詳細介紹外邊距margin的幾個重點部分，包括重疊、auto和無效情況

【前提】

margin重疊又叫margin合併，發生這種情況有兩個前提

1、只發生在block元素上(不包括float、absolute、inline-block元素)

2、只發生在垂直方向上(不考慮writing-mode)

【分類】

margin重疊共包括以下3種情況

1、相鄰的兄弟元素


pstyle>
兄弟一p>
兄弟二p>

2、父級元素和第乙個或最後乙個子元素，父子級的margin重疊又叫margin傳遞


.box
.inner
style>
class="box">
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元素


.box 
.void
style>
head>
class="box">
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: (預設重疊) | (取消) | (分隔)

該屬性用於設定margin是否重疊，作用於發生margin重疊的兩個元素之一。如果，兩個都使用該屬性，乙個設定為discard，乙個設定為separate，則最終效果為重疊collase

只有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無效

``````````````不可設定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足夠小而跑到父元素外面的，所以移動到一定位置就不再接著向上移動了

理解CSS外邊距margin

理解CSS外邊距margin

理解CSS外邊距margin

margin外邊距合併

相關推薦