margin 负值为什么要这样设计?
margin top left 为负数时：
是以内容盒为基准线，所以负值使整个元素向上，右移动。
margin right bottom 为负数时：
是以border为基准线，所以负值使不会影响元素的位置，但会使元素的基准线发生变化。结果使这个元素相邻的元素的位置发生变化。
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
-
这里借助怿飞的一篇文章来说明..由浅入深漫谈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 下边为参考线垂直向下位移。
2019-07-17 19:16:17赞同 展开评论