大家都知道，css中margin和padding是一对好兄弟，一个是外边距，一个是内边距，形象的说就是一个是撑大自己，一个是往外挤，就好比一个人，padding就是吃东西使自己体型变大，margin就是自己穿了很多衣服增大了自己与别人之间的距离。下面是一个大家经常能看到的图
我们知道，margin一共有4个方向上的取值，分别为top right bottom left。我们平时见到的margin都为正值，表现形式为4个方向上的外边距扩散。但是，其实margin还可以取负值
我们先来看一个小demo
<style>
.box {
border: 1px solid red;
margin-top: 150px;
}
.box div {
height: 50px;
width: 100px;
display: inline-block;
border: 1px solid #000;
}
.box1 {
background-color: deeppink;
}
.box2 {
background-color: #ffac00;
}
.box3 {
background-color: #ac589a;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
效果图如下：
在看了不同取值情况下不同的表现后，可能更加混乱了，心想：这和我想象的有点不一样啊！其实你看的足够仔细的话应该可以发现：
1.它们都产生了层级关系(上下可以通过改成块级元素看出)
2.top和left是同一种表现，right和bottom是同一种表现。前者就是按照自己相反的方向位移相同的距离，而后者则像是把自己同方向上的兄弟元素往自己身边拉相同的距离。产生这种差异的原因主要是，top和left的位移是参考外元素来移动自己，而right和bottom是把自己作为了参考物来影响它周围的元素。
如果再说的浅显一点可以分为两种理解方式
1.参考线理解。引用网上的一句话“在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。”我们可以想象父元素.box的border就是那条参考线，当取值为正负的时候，第一个元素的top和left就正反方向位移相应的距离，同样第二个元素是以他前面那个元素的border作为参考线。而取值为bottom和right的时候，元素自己本身成为了参考物来影响它周围的元素，正值道理相同，在负值的时候，可以想象它自己内凹了一段距离，同样带动参考线内凹了，所以其后面的元素也就跟着这条参考线跑了过去，看起来就像是被吸了回去。这样的说法并不严谨，因为W3C并没有参考线的说法，但是我觉得有助于理解。
2.盒子模型理解。了解过盒子模型的同学都知道，在标准盒模型下，元素的width = border-left+border-right+padding-left+padding-right+contentWidth+margin-left+margin-right。高度同理。所以我们可以这样理解，因为文档流只能向左或向上流动，不能向下或向右流动。所以当取值为right和bottom的时候，因为外边距取了负数，所以只能通过减少自身内容区的高度或者宽度来满足盒子模型的等式，所以后面的元素因为‘流’的特点就占据了它原来的位置，但是元素的高度并不是真的减少了，只是供给css可读的高度减少了。而取值为left和top时，道理相同，因为自己的那部分高度或者宽度减少了，自然而然的就流向了前面或者上面。另外还有一点，当元素被包裹在一个父容器中，如果没有设置宽度。使用left或者right为负数，它的宽度就会增加，这一点也可以通过盒模型来理解。因为要满足等式，只能增加自身宽度。
