這裡借助懌飛的一篇文章來說明..由淺入深漫談margin屬性

這個問題你可以引入一個參考線的東西來幫助理解，（ W3C 中並沒有的參考線的說法。）這裡的參考線指的是margin 移動的基準點，此基準點相對於box 是靜止的。而 margin 的數值，就是 box 相對於參考線的位移量。

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