一、屬性介紹

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。
可取值：
auto 瀏覽器計算外邊距。
length 規定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px。
% 規定基于父元素的寬度的百分比計算的外邊距。
inherit 規定應該從父元素繼承外邊距。

二、常見問題

1.IE6下浮動元素雙倍邊距問題
解決方法：
IE6中設置block元素display:inline;
.l{margin-left:20px;float:left;display:inline;}
原因：首先，inline元素和inline-block元素是沒有雙倍邊距的。對inline元素設置float后，會有個haslayout,使inline元素具有inline-block元素的特性，進而可以設置垂直margin、padding、width、height。

2.margin外邊距合并問題
外邊距的合并發生在以下三種情形：
情形一：空塊元素
a)如果一個塊級元素沒有border、padding、inline content、height、min-height來分隔，設置margin-top和margin-bottom屬性后會合并,

b)實例：

從上例可以看出，最后.out computed height為40px;
>=IE8、Firefox、Chrome測試效果相同。但是有個疑問，去掉out的邊框后，其高度計算為0，不知道什么原因？

情形二：父元素與第一個或最后一個子元素
如果塊元素的 margin-top 與它的第一個子元素之間沒有border, padding, inline content, 或 clearance 分隔，或者塊元素的 margin-bottom 與它的最后一個子元素之間沒有padding, inline content, height, min-height, or max-height 分隔，那么外邊距會合并。

>=IE6,FF,Chrome效果效果相同，此時inner01的margin-top:并沒有起作用，這就是為什么很多人在網上問，我設置margin-top,margin-bottom不起作用的原因了！如下圖：