CSS 负边距

老实说，个人从来没有重视过 CSS，觉得很简单，没有可学之处。但随着使用和认识的深入，才发现 CSS 也博大精深。加上 CSS3 的出现，以前需要 JavaScript 的地方，现在用 CSS 亦可以轻松实现。

相信未来，CSS 一定能大放异彩！这次一起和大家聊一聊 CSS 中的负边距。

负边距的特点

在正式介绍负边距之前，我们先回顾一下文档流。所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

脱离文档流

要使一个元素脱离文档流有两种方式：

1. 使用浮动（float）：值为 left、right 均会使元素脱离文档流
2. 使用定位（position）：值为 absolute、fixed 的元素脱离文档流，其它不脱离文档流

未脱离文档流元素

<div class="box1">A</div>
<div class="box2">B</div>
<div class="box3">C</div>

我们先来看一看正边距，当我们给三个 div 分别设置上边距时，自然而然，三个元素都会隔开一定间隙。

当我们给三个 div 分别设置负上边距时，这时我们看到元素将被拉进指定的方向。

我们可以这样来思考，既然正边距是相隔距离；那值为负，自然就反过来了，就是相叠距离。

当我们设置某个元素的 margin-right 和 margin-bottom 为负值，而非 margin-left 和 margin-top 时，这时元素并不会如你所想的那样向右或下移动，而是将后续的元素拖拉进来，覆盖本来的元素。

造成这两种不同现象的原因是文档流只会向左和向上，不可能向右和向下

如果没有设定 width 属性，设定负 margin-left 和 margin-right 会将元素拖向对应的方向，并增加宽度，此时的 margin 的作用就像 padding 一样。没有设置 width 的元素的宽度值是由包围元素的宽度来计算出来的，然后减去 margin，所以就会得到实际上比原始元素更宽的值。

总结

• margin-left 和 margin-top：影响自身元素，将向指定方向偏移
• margin-right 和 margin-bottom：影响相邻元素，将其拖入指定方向

已脱离文档流元素

绝对定位元素（absolute）

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素也会按照设置的方向移动相应的距离。

设置的 margin 的方向为 bottom 或者 right

由于设置绝对定位的元素已经脱离了标准文档流，所以，设置 margin-right/bottom 对后面的元素并没有影响。

浮动元素（float）

其实浮动元素和未脱离文档流的元素在负边距上表现类似，只不过浮动有左和右两种浮动。对应文档流，我们可以称浮动元素为浮动流。

当负值的 margin 的方向与浮动流方向一直时，则元素会往对应的方向移动对应的距离。

当负值的 margin 的方向与浮动流方向相反时，则元素本身不动，元素之前或者之后的元素会向该元素的方向移动相应的距离。

总结
浮动流不像文档流只是向上和向左，它是可以向左和向右的。除了这点外，其实和未脱离文档流元素表现差不多。

负边距的应用

三列布局（static 元素）

li {
   
    line-height: 1.5em;
}
.col2 {
   
    margin-left: 200px;
}
.col3 {
   
    margin-left: 400px;
}
.top {
   
    margin-top: -3em;
}

<ul>
    <li class="col1">第一列第一排