总之一句话，在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。
左和右的负边距对元素宽度的影响
负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！
这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）。
比如下图的黑灰色部分是一个块状元素，它没有设定宽度。它被包裹在一个宽度为400px,且水平居中的父元素中。
现在给这个元素的设一个margin-right:-100px;
我们看到它的宽度的确变长100px;然后再给它设一个margin-left:-100px;
我们看到它变得更宽了。
负的margin会改变元素的宽度，这的确很让人费解，如果说负边距会改变元素在文档流中的位置还是很好理解的话，那改变宽度这种现象还真的蛮让人不可思议的。
那这货有什么用途呢？我就举一个例子吧。
想要创建上图中黑框内的几个元素按顺序排下来，中间带些间隔的布局要怎么做？，当然最简单省事的方法就是利用浮动了。我们把黑框里面的子元素向左浮动，然后设一个合适的margin-right,是不是就办到了呢？但因为外边黑框的宽度是固定的，就是里面四个子元素的宽度加上三列间隔的宽度，所以靠近右边边界的子元素就不应该有正向的margin-right了，否则这一行就只能容纳三个子元素了。有人说那这还不简单，给靠近右边界的那些子元素加一个class，把它的margin-right设为0不就行了。这当然可以，但如果这些子元素是在模板中通过循环动态输出的，那在循环的时候还得判断哪些子元素是靠近右边边界的，如果是就加上一个class。这样做的话是不是就有点麻烦了？所以解决办法是加大子元素的父容器的宽度，让它能够容纳一行中有四个子元素加上四列间隔的宽度，然后最外面的的黑框的那个容器设一个overflow:hidden就行了。上面说了负的左右边距能加大元素的宽度，所以给子元素的父容器设一个合适的负的margin-right就可以了。当然你也可以直接在css中把子元素的父容器的宽度设宽一些，举这个例子只是为了说明负边距也是一种方法。看下完整的代码：
复制代码
<style>
