由淺入深漫談margin屬性

margin 在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎屬性。

一、margin的基本特性

margin 屬性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用來設定 box 的 margin area。屬性 margin 可以用來同時設定 box 的四邊外邊距，而其他的 margin 屬性只能設定其自各的外邊距。

margin 屬性可以應用於幾乎所有的元素，除了**顯示型別（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對非置換內聯元素（non-replaced inline element）不起作用。

或許有朋友對非置換元素（non-replaced element）有點疑惑，稍微幫助大家理解一下。非置換元素，w3c 中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對應著置換元素（replaced element），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，

w3c中給出了定義：

從定義中我們可以理解到，置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類預設就有 css 格式化外表範圍的元素。進而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。

margin 始終是透明的。

二、margin 的基本寫法

外邊距的 margin-width 的值型別有：auto | length | percentage

percentage：百分比是由被應用 box 的

containing block

（注：乙個元素的 containing block 是該元素產生的 box(es)在計算位置和大小時參考的乙個矩形）的大小所決定。對於 margin-top 和 margin-bottom 也同樣成立。

margin 的預設值為 0，並且 margin 支援負值。

上面我們曾提到屬性 margin 可以用來同時指定 box 的四邊外邊距。如果屬性 margin 有四個值，那麼值將按照上-右-下-左的順序作用於四邊，即從元素的上邊開始，按照順時針的順序圍繞元素。表示式如下：

margin ：top right bottom left

；

四個數值中間以空格分隔。效果等同於：

margin
-top
:value
;margin
-right
:value
;margin
-bottom
:value
;margin
-left
:value
;

並且規範還提供了省略的數值寫法，基本原則如下：

如果沒有 left 值，則使用 right 代替；

如果沒有 bottom 值，則使用 top 代替；

如果沒有 right 值，則使用 top 值代替。

根據這些基本原則，我們可以有三種省略方式，但不管怎樣省略 margin 的數值都會大於等於乙個，而 margin 的預設數值是從 top 開始至 left 結束，那麼對於省略的具體情況，我們可以從 left 反推理回去。

1、如果 margin 只有三個值，按照值的順序為 margin：top right bottom; 缺少了 left，根據原則，則 left 的值有 right 來代替。margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;

2、如果 margin 只有兩個值，按照值的順序為 margin：top right; 缺少了 bottom 和 left，根據原則 left 的值由 right 來代替，bottm 的值由 top 來代替。margin:10px 20px; 就等於 margin:10px 20px 10px 20px;

3、如果 margin 只有乙個值，按照值的順序為 margin:top; 缺少了 bottom、left 和 right，根據原則 left 的值由 right 來代替，bottom 的值由 top 來代替，right 的值右 top 來代替，也就是說 left 的值也由 top 來代替。margin:10px; 就等於 margin:10px 10px 10px 10px;

三、margin的解析邏輯

目前我們已經了解到了 margin 的基本特性和基本寫法，但對元素 margin 的基本解析邏輯還是很模糊，到底 margin 的 top、right、bottom、left 都是以什麼為基準來促使 box model 形成。為了形象，易懂的對 margin 的邏輯進行說明，下面講解的過程中，將引入 w3c 上沒有的參考線的說法。何謂參考線？參考線就是 margin 移動的基準點，此基準點相對於 box 是靜止的。而 margin 的數值，就是 box 相對於參考線的位移量。

在 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 數值為正值時候的情形，如果是負值則位移方向相反。

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

外邊距的margin-width的值型別有：auto | length | percentage

如上**，很簡單，為了方便我們看到效果，我們給 div 設定了寬度和高度以及背景色。

現在我們給 div 的樣式加上 margin 屬性，比如：

margin
:-10px
20px
-30px
40px
;

這時候 margin 的解析邏輯是怎樣的呢？首先我們要搞清 div 的和周邊元素的關係，div 沒有相連元素，而此時 div 的 containing block 是 body 產生的 block box。則根據上面介紹的參考線原理，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時以 body 的 content 左邊為參考線進行水平向右位移，位移的大小為 40px，同理，上邊距以 body 的 content 上邊為參考線進行垂直向上位移 10px（負值和正值的方向相反），下邊距依照現在 div 的 borer 下邊（此時的 div 已經經過上邊距位移過了）垂直向上位移 30px（此時，margin 不會改變 box 的 border 內的物理大小，但會改變 box 的邏輯大小，即：以此 box 的 margin 的下邊為參考的元素，不是從 box 的物理位置開始的，而是從邏輯位置開始），右邊距依照現在 div 的 borer 右邊（此時的 div 已經經過左邊距位移過了）水平向右位移 20px。或許有朋友問你分析的順序怎麼和 margin 表示式中出現的順序不一樣？如果按照 margin 表示式中出現的順序來分析，結果是一樣的，只是為了更好的方便大家的理解而沒有按照表示式的順序來分析。

box 的實際大小 = box 的物理大小 + 正的 margin

這僅對元素本身有效，對於其後面的相關元素，他們則只以 margin 的邏輯大小為準則，進行布局。

有朋友反應，聽得很迷糊，越看越不懂，如果你對具體的理解過程不感興趣的話，那記住下面我總結的結論就可以了，xd

結論：

box 最後的顯示大小等於 box 的 border 及 border 內的大小加上正的 margin 值。而負的 margin 值不會影響 box 的實際大小，如果是負的 top 或 left 值會引起 box 的向上或向左位置移動，如果是 bottom 或 right 只會影響下面 box 的顯示的參考線。

由淺入深漫談margin屬性

由淺入深漫談margin屬性

由淺入深漫談margin屬性

由淺入深漫談margin屬性

相關推薦