块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。
之前的文章中写了margin上下边距塌陷的几种情况；
这几种情形简而言之，
1：自身元素没有border，padding和内容，这相当于上下margin相接——margin-top和margin-bottom塌陷；
2：相邻元素的margin-bottom和margin-top相接也会塌陷；
3：以上两种情况可以同时发生；
4：对于父子元素，如果父元素没有bfc特性（比如设置overflow：hidden等），父元素margin-top和第一个子元素margin-top会塌陷。数值为其中较大的值（都是正值的情形下。负值下面会讲）
margin负边距：
1.margin-left：
margin-left负值时，inner元素与outer元素
对比margin-left为正时：inner元素与outer元素
可以看到就是父元素content的边界（这里没有padding）与子元素border之间的距离，
距离为正时，border左边界在父元素content内侧；
距离为负时，在父元素content外侧；
负值代码举例：（正值代码就删掉了margin-left的负号）
.outer{
width:200px;
height:200px;
background: green;
margin:0 auto;
}
.inner{
height:100px;
background: pink;
margin-left:-20px;
}
<div class='outer'><div class="inner"></div></div>
margin-right：
以下都是将上面代码中的margin-left改成了margin-right；
正值时：
负值时：
可以看到和margin-left效果一模一样；
margin-top：
明显看到俩图片高度不一样。
子元素margin-top为负值时，父子元素一起向上移动。
至于margin-bottom有没有负值，没有变化。。。。。
这就是很蛋疼的。。。
我们继续探索margin-bottom：
margin-bottom:
相应代码：
.top{
width:200px;
height:200px;
margin-bottom:-190px;
background:yellow;
}
.bottom{
width:200px;
height:200px;
background: green;
}
<div class="top"></div>
<div class="bottom"></div>
bottom元素上浮了190px。。。
这个怎么理解呢？
参考了网上大神的参考线的说法。。但是我觉得还是很拗口
所以我自己觉得
margin-bottom为负值（以上面代码为例）相当于将top元素与bottom元素之间的间隔为-190px，他们之间重叠了190px；
那么margin负值的特性就仅仅如此吗？
仔细看以上代码。可以发现我们在探索left和right时子元素没有设置宽度。如果设置宽度呢？
继续看：
margin-left为负值：
宽度没有变化，但是向左移动了。这个就是圣杯模型用到的移动元素办法；
.outer {
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
.inner {
height: 100px;
width: 100px;
background: pink;
margin-left: -20px;
}
<div class='outer'>
<div class="inner"></div>
</div>
那么margin-right呢？
将以上代码margin-left: -20px;改为margin-right: -20px;
发现毫无变化。
那么是不是代表margin-right没有用呢？
我们再看：
.outer {
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
.inner {
height: 100px;
width: 100px;
background: pink;
float:left;
margin-right:-20px;
}
.inner1 {
height: 100px;
width: 100px;
background: peru;
float:left;
}
<div class='outer'>
<div class="inner"></div>
<div class="inner1"></div>
</div>
margin-right影响它后面的兄弟元素位置。。。
所以在只有margin负值的情形下，子元素无宽度。left、right均向外溢出。。。
（这是昨天看了一篇很老的文章，看到有用利用margin-left和right负值特性画按钮）
margin-top为负值。。。父元素和子元素margin-top都为正值时，取较大值，一正一负时，正值减去负值的绝对值即为父元素外围的外边距。
如果得到的值为相减得到的值为负值。。父子元素均向上移动。
正值的话。就是父元素的外间距。
总结一下，margin负值：
1：在子元素未设置宽度时，margin-left和right会让子元素拉伸，
2：设置宽度时，margin-left会让元素本身向左移动；margin-right和margin-bottom会让后面的元素与它自身之间的右外间距和下外间距为负值。简单来说，就是重合。
3：margin-top主要涉及到塌陷问题。
margin-right还有一个特性，这是圣杯模型中涉及到的：
这也是圣杯模型的一个关键点
https://www.jianshu.com/p/ee4936d09abd
//不过在这个程序中；
width: 150px;
/* RC width */
/* margin-left: -150px;
right:-150px; */
/*这是另一种写法和 margin-right: -150px;效果一样*/
margin-right: -150px;
其实没有太懂
二者等价。所以可以替代呀。。。还是不建议用自己不熟悉的规则，以免出现意外的状态。
转载于:https://www.jianshu.com/p/1a09d5e90675