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 数值为正值时候的情形，如果是负值时位移方向则按反方向进行。