css - margin 负值为什么要这样设计?

Question

• margin top left 为负数时：
  是以内容盒为基准线，所以负值使整个元素向上，右移动。
• margin right bottom 为负数时：
  是以border为基准线，所以负值使不会影响元素的位置，但会使元素的基准线发生变化。结果使这个元素相邻的元素的位置发生变化。

---

margin top left 好理解。
margin right bottom 为什么要这样设计呢？这样有什么好处？

Answer 1

這裡借助懌飛的一篇文章來說明..由淺入深漫談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 數值為正值時候的情形，如果是負值時位移方向則以反方向進行。