前言##

前几天写了一篇关于 margin负值的博文，以为理解了其中的奥秘，但是今天把《css权威指南》中关于外边距的一章看了一遍，发现还是有不能理解的地方，所以特此更一篇博文，解答自己的疑惑~

普通文档流中的margin负值##

效果：

普通文档流中的元素在页面中的位置是根据文档流的变化而变化的。负边距会使在文档流中的元素发生偏移，这种偏移与相对定位不同的是**元素不再占有偏移前的空间，所以，文档流中其他元素会“流”过来，填补空白。

给两个div增加负边距之后：

.div1,

.div2{

width:400px;

height: 150px;

margin: -25px;

color:red;

}

效果：

由效果可知：两个div都向上,向左移动了25px，但是负边距并没有减小元素在文档流的尺寸，只是在计算元素位置时，会认为负边距减少了元素的尺寸。

接下来，看另外一个例子~

注意 父容器并没有设置高度，高度由内容决定

效果：

div5不加margin-bottom: -20px;属性前：

添加之后：

可见，父容器的高度变小！

也就是说margin-bottom为负数会影响未设定高度父元素的高度，子元素自身的高度不变

在IE8+以及那些标准浏览器中，给父元素添加一个overflow:hidden;的属性

因为父元素的高度变了，但子元素的高度没有发生改变，所以需要使子元素超出隐藏。如下图：

所以，在文档流中，元素的“边界”由margin决定，margin为负值时，“边界”向里收，文档流只认边界,而不是元素的实际尺寸。

负边距对元素宽度的影响##

前提：没有设定元素的width属性

.div6{

width: 400px;

border: 4px solid #8ad;

margin: 0 auto;

}

.div7{

height: 200px;

background:rgba(1,0,0,.3);

margin: 0 -100px;

}

效果:

margin-right/margin-left为负值，父元素指定了宽度的情况下子元素也会把自身拉长

补充##

通过给浮动元素设定margin负值也能导致元素之间存在覆盖

负数margin对于绝对定位元素的影响主要有：利用绝对定位元素来实现元素垂直水平居中，不过这种居中的实现依然要知道元素本身的尺寸!

absolute定位与margin定位其实是没有什么冲突的，无论absolute元素是否设置了left/top值，其margin属性值都是可以起作用的!

总结##

除了父元素指定了宽度，而子元素通过margin-right/margin-lef负值改变了元素自身的大小这种情况，margin-left/margin-right/margin-bottom/margin-top并不会改变元素本身的大小。margin-left为负数只会导致元素往左边移动，margin-top为负数是往上移动，而margin-bottom会改变元素的逻辑大小，使得后面的元素可能会覆盖元素自身(但是不会覆盖元素的border);margin-right也仅仅是修改元素的右边界，使得后续的元素可能覆盖元素自身!