三、margin的解析邏輯
目前我們已經了解到了margin的基本特性和基本寫法，但對元素margin的基本解析邏輯還是很模糊，到底margin的top、right、bottom、left都是以什麼為基准來促使boxmodel形成。為了形象，易懂的對margin的邏輯進行說明，下面講解的過程中，將引入W3C上沒有的參考線的說法。何謂參考線？參考線就是margin移動的基准點，此基准點相對於box是靜止的。而margin的數值，就是box相對於參考線的位移量。
在margin中top、right、bottom、left的參考線並不一致為一類，而是分為了兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另一類。那他們到底各以什麼為參考線呢？top以containingblock的content上邊或者垂直上方相連元素margin的下邊為參考線垂直向下位移；left以containingblock的content左邊或者水平左方相連元素margin的右邊為參考線水平向右位移。right以元素本身的border右邊為參考線水平向右位移；bottom以元素本身的border下邊為參考線垂直向下位移。從上我們可以看到top和left都是以外元素為參考，而right和bottom以本元素為參考。上面的位移方向是指margin數值為正值時候的情形，如果是負值則位移方向相反。
或許理論聽起來比較枯燥，我們舉例說明一下：
ExampleSourceCode
- http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd\">
- <HtmlXMLnsHtmlXMLns=\"http://www.w3.org/1999/xHtml\">
- <head>
- <metahttp-equivmetahttp-equiv=\"Content-Type\"content=\"text/Html;charset=utf-8\"/>
- <title>無標題文檔title>
- <styletypestyletype=\"text/CSS\">
- div{width:200px;height:200px;background:#ccc;}
- style>
- head>
- <body>
- <div>外邊距的margin-width的值類型有：auto|length|percentagediv>
- body>
- Html>
如上代碼，很簡單，為了方便我們看到效果，我們給div設置了寬度和高度以及背景色。
現在我們給div的樣式加上margin屬性，比如：
ExampleSourceCode
- margin:-10px20px-30px40px;
這時候margin的解析邏輯是怎樣的呢？
首先我們要搞清div的和周邊元素的關系，div沒有相連元素，而此時div的containingblock是body產生的blockbox。則根據上面介紹的參考線原理，div的左外邊距以containingblock的content左邊為參考線，及此時以body的content左邊為參考線進行水平向右位移，位移的大小為40px，同理，上邊距以body的content上邊為參考線進行垂直向上位移10px（負值和正值的方向相反），下邊距依照現在div的borer下邊（此時的div已經經過上邊距位移過了）垂直向上位移30px（此時，margin不會改變box的border內的物理大小，但會改變box的邏輯大小，即：以此box的margin的下邊為參考的元素，不是從box的物理位置開始的，而是從邏輯位置開始），右邊距依照現在div的borer右邊（此時的div已經經過左邊距位移過了）水平向右位移20px。或許有朋友問你分析的順序怎麼和margin表達式中出現的順序不一樣？如果按照margin表達式中出現的順序來分析，結果是一樣的，只是為了更好的方便大家的理解而沒有按照表達式的順序來分析。
用margin最後的顯示大小到底是怎麼樣的，或許有朋友也比較疑惑，我暫時用邏輯大小和物理大小來區分（其實上面已用到此概念），到底什麼是邏輯大小，什麼是物理大小呢？！具體可以看圖，物理大小指的是除去margin，也就是包含border以內的box大小，而邏輯大小，則是box通過margin解析規則解析後得到的大小（這或許可以解釋為什麼IE5會錯誤解析盒模型），當邏輯大小小於物理大小時，則不會影響實際box的顯示，也就是說，此時顯示的是box的物理大小，而當邏輯大小大於物理大小時，則此時顯示邏輯大小。這僅對元素本身有效，對於其他相關元素，他們則只以margin的邏輯大小為准，進行布局。