一、Margin的特性
margin始終是透明的。
margin通過使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。即：margin-top、margin-right、margin-bottom、margin-left。
外邊距的 margin-width 的值類型有：auto | length | percentage
也可以使用簡寫的外邊距屬性同時(shí)改變所有的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時(shí)針“上右下左”記憶。
并且規(guī)范還提供了省略的數(shù)值寫法，基本如下：
1、如果margin只有一個(gè)值，表示上右下左的margin同為這個(gè)值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;
2、如果 margin 只有兩個(gè)值，第一個(gè)值表示上下margin值，第二個(gè)值為左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
3、如果margin有三個(gè)值，第一個(gè)值表示上margin值，第二個(gè)值表示左右margin的值，第三個(gè)值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
4、如果margin有四個(gè)值，那這四個(gè)值分別對(duì)應(yīng)上右下左這四個(gè)margin值。例如：margin:10px 20px 30px 40px;
在實(shí)際應(yīng)用中，個(gè)人不推薦使用三個(gè)值的margin，一是容易記錯(cuò)，二是不容易日后修改，一開始如果寫成margin:10px 20px 30px;日后需求改動(dòng)為上10px，右30px，下30px，左20px，你不得不還是得把這個(gè)margin拆開為margin:10px 30px 30px 20px;費(fèi)力且不討好，不如一開始就老老實(shí)實(shí)的寫成margin:10px 20px 30px 20px;來的實(shí)在，不要為了現(xiàn)在節(jié)省倆個(gè)字節(jié)而讓日后再次開發(fā)的成本上升。
垂直外邊距合并問題
別被上面這個(gè)名詞給嚇倒了，簡單地說，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并了解這個(gè)基本知識(shí)。
實(shí)際工作中，垂直外邊距合并問題常見于第一個(gè)子元素的margin-top會(huì)頂開父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下(FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問題，IE下反而表現(xiàn)良好。例子可以查看下面代碼(IE下表現(xiàn)“正常”，標(biāo)準(zhǔn)瀏覽器下查看出現(xiàn)“bug”)：

如果按照CSS規(guī)范，IE的“良好表現(xiàn)”其實(shí)是一個(gè)錯(cuò)誤的表現(xiàn)，因?yàn)镮E的hasLayout渲染導(dǎo)致了這個(gè)“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會(huì)表現(xiàn)出“有問題”的外觀。好了，如果你讀過了上面W3Shcool的CSS外邊距合并的文章后，就很容易討論這個(gè)問題了。這個(gè)問題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。
再說了白點(diǎn)就是：父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會(huì)不斷一層一層的找自己“領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無領(lǐng)導(dǎo)的margin防止它越級(jí)，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。
對(duì)于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問題。
一般說來這個(gè)問題解釋到這里，大多數(shù)文章就不會(huì)再深入下去了，但作為一名實(shí)戰(zhàn)開發(fā)者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開距離，而按照你這么一個(gè)解法，其實(shí)是一種“修復(fù)”，為了“彌補(bǔ)修復(fù)”這個(gè)父子垂直外邊距合并這個(gè)CSS規(guī)范“Bug”，而強(qiáng)制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發(fā)生這樣的情況還是會(huì)忘記這條準(zhǔn)則，而且在頁面設(shè)計(jì)稿里如果不需要border-top加個(gè)上邊框，這么一加反而畫蛇添足，為以后修改留下隱患。
為什么一定要用border-top,padding-top去為了這么一個(gè)所謂的標(biāo)準(zhǔn)規(guī)范而多寫這么一行代碼呢？答案你可以參考另外一篇文章用Margin還是用Padding里找到答案。

用Margin還是用Padding
何時(shí)應(yīng)當(dāng)使用margin：
需要在border外側(cè)添加空白時(shí)。
空白處不需要背景（色）時(shí)。
上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px + 20px的margin，將得到20px的空白。
何時(shí)應(yīng)當(dāng)時(shí)用padding：
需要在border內(nèi)測添加空白時(shí)。
空白處需要背景（色）時(shí)。
上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px + 20px的padding，將得到35px的空白。
個(gè)人認(rèn)為：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。

二、margin 的基本寫法
外邊距的 margin-width 的值類型有：auto | length | percentage
percentage：百分比是由被應(yīng)用 box 的containing block（注：一個(gè)元素的 containing block 是該元素產(chǎn)生的 box(es)在計(jì)算位置和大小時(shí)參考的一個(gè)矩形）的大小所決定。對(duì)于 margin-top 和 margin-bottom 也同樣成立。
margin 的默認(rèn)值為 0，并且 margin 支持負(fù)值。
上面我們?cè)岬綄傩?margin 可以用來同時(shí)指定 box 的四邊外邊距。如果屬性 margin 有四個(gè)值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開始，按照順時(shí)針的順序圍繞元素。表達(dá)式如下：

四個(gè)數(shù)值中間以空格分隔。效果等同于：

并且規(guī)范還提供了省略的數(shù)值寫法，基本原則如下：
如果沒有 left 值，則使用 right 代替；
如果沒有 bottom 值，則使用 top 代替；
如果沒有 right 值，則使用 top 值代替。
根據(jù)這些基本原則，我們可以有三種省略方式，但不管怎樣省略 margin 的數(shù)值都會(huì)大于等于一個(gè)，而 margin 的默認(rèn)數(shù)值是從 top 開始至 left 結(jié)束，那么對(duì)于省略的具體情況，我們可以從 left 反推理回去。
1、如果 margin 只有三個(gè)值，按照值的順序?yàn)?margin：top right bottom; 缺少了 left，根據(jù)原則，則 left 的值有 right 來代替。margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
2、如果 margin 只有兩個(gè)值，按照值的順序?yàn)?margin：top right; 缺少了 bottom 和 left，根據(jù)原則 left 的值由 right 來代替，bottm 的值由 top 來代替。margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
3、如果 margin 只有一個(gè)值，按照值的順序?yàn)?margin:top; 缺少了 bottom、left 和 right，根據(jù)原則 left 的值由 right 來代替，bottom 的值由 top 來代替，right 的值右 top 來代替，也就是說 left 的值也由 top 來代替。margin:10px; 就等于 margin:10px 10px 10px 10px;

三、margin的解析邏輯
目前我們已經(jīng)了解到了 margin 的基本特性和基本寫法，但對(duì)元素 margin 的基本解析邏輯還是很模糊，到底 margin 的 top、right、bottom、left 都是以什么為基準(zhǔn)來促使 box model 形成。為了形象，易懂的對(duì) margin 的邏輯進(jìn)行說明，下面講解的過程中，將引入 W3C 上沒有的參考線的說法。何謂參考線？參考線就是 margin 移動(dòng)的基準(zhǔn)點(diǎn)，此基準(zhǔn)點(diǎn)相對(duì)于 box 是靜止的。而 margin 的數(shù)值，就是 box 相對(duì)于參考線的位移量。
在 margin 中 top、right、bottom、left 的參考線并不一致為一類，而是分為了兩類參考線，top 和 left 的參考線屬于一類，right 和bottom 的參考線屬于另一類。那他們到底各以什么為參考線呢？top 以 containing block 的 content 上邊或者垂直上方相連元素 margin 的下邊為參考線垂直向下位移；left 以 containing block 的 content 左邊或者水平左方相連元素 margin 的右邊為參考線水平向右位移。right 以元素本身的 border 右邊為參考線水平向右位移；bottom 以元素本身的border 下邊為參考線垂直向下位移。從上我們可以看到 top 和 left 都是以外元素為參考，而 right 和 bottom 以本元素為參考。上面的位移方向是指 margin 數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。

或許理論聽起來比較枯燥，我們舉例說明一下：

如上代碼，很簡單，為了方便我們看到效果，我們給 div 設(shè)置了寬度和高度以及背景色。
現(xiàn)在我們給 div 的樣式加上 margin 屬性，比如：

這時(shí)候 margin 的解析邏輯是怎樣的呢？首先我們要搞清 div 的和周邊元素的關(guān)系，div 沒有相連元素，而此時(shí) div 的 containing block 是 body 產(chǎn)生的 block box。則根據(jù)上面介紹的參考線原理，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時(shí)以 body 的 content 左邊為參考線進(jìn)行水平向右位移，位移的大小為 40px，同理，上邊距以 body 的 content 上邊為參考線進(jìn)行垂直向上位移 10px（負(fù)值和正值的方向相反），下邊距依照現(xiàn)在 div 的 borer 下邊（此時(shí)的 div 已經(jīng)經(jīng)過上邊距位移過了）垂直向上位移 30px（此時(shí)，margin 不會(huì)改變 box 的 border 內(nèi)的物理大小，但會(huì)改變 box 的邏輯大小，即：以此 box 的 margin 的下邊為參考的元素，不是從 box 的物理位置開始的，而是從邏輯位置開始），右邊距依照現(xiàn)在 div 的 borer 右邊（此時(shí)的 div 已經(jīng)經(jīng)過左邊距位移過了）水平向右位移 20px?；蛟S有朋友問你分析的順序怎么和 margin 表達(dá)式中出現(xiàn)的順序不一樣？如果按照 margin 表達(dá)式中出現(xiàn)的順序來分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒有按照表達(dá)式的順序來分析。

用 margin 最后的實(shí)際顯示大小的到底是怎么樣呢，或許有朋友也比較疑惑，我暫時(shí)用邏輯大小和物理大小來區(qū)分（其實(shí)上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去 margin，也就是包含 border 以內(nèi)的 box 大小，而邏輯大小，則是 box 通過 margin 解析規(guī)則解析后得到的大?。ㄟ@或許可以解釋為什么IE5會(huì)錯(cuò)誤解析盒模型）。在上圖中，box 的實(shí)際顯示的寬度等于 box 的邏輯大小，而 box 實(shí)際顯示的高度等于 box 的物理大小，這說明 box 實(shí)際顯示的大小可能是 box 的邏輯大小，也可能是 box的 物理大小，規(guī)則到底是怎樣的——
box 的實(shí)際大小 = box 的物理大小 + 正的 margin
這僅對(duì)元素本身有效，對(duì)于其后面的相關(guān)元素，他們則只以 margin 的邏輯大小為準(zhǔn)則，進(jìn)行布局。
有朋友反應(yīng)，聽得很迷糊，越看越不懂，如果你對(duì)具體的理解過程不感興趣的話，那記住下面我總結(jié)的結(jié)論就可以了，XD
結(jié)論：
box 最后的顯示大小等于 box 的 border 及 border 內(nèi)的大小加上正的 margin 值。而負(fù)的 margin 值不會(huì)影響 box 的實(shí)際大小，如果是負(fù)的 top 或 left 值會(huì)引起 box 的向上或向左位置移動(dòng)，如果是 bottom 或 right 只會(huì)影響下面 box 的顯示的參考線。

最新評(píng)論