W3C规范在介绍margin时有这样一句话：
Negative values for margin properties are allowed, but there may be implementation-specific limits.
于是，聪明的开发者们就发现了很多负边距的巧妙用法。
比如，他可以增加一个不定宽块框的宽度，他可以让一个框向上移动去覆盖另一个框，他可以让文字移动去覆盖文字，也可以让浮动框移动去覆盖另一个浮动框。
利用这些特点，我们可以实现圣杯布局和双飞翼布局、等高布局、多列布局等等实用的布局方式。
那么负边距到底是如何工作的呢？也就是说，这些现象要怎么解释？
我是这样理解的：
在可视化格式模型中，一切都是框。所有的框都处于流动状态。就像是一个个漂浮在水上的小木块儿，水会将他们往一个地方推。
而边距，就是用于截流。就像是将一条河截成两段之后，后一段的水流就无法影响到前一段水流中的小木块了儿。
普通流（normal flow）：
普通流中有块级格式化上下文和行内级格式化上下文。
在块级格式化上下文中，块级框占满一行，从上到下依次排列。占满一行意味着，如果他没有被设置宽度的话，他就会横向填充满整个包含框。
所以，块级格式化上下文中的流应该是这样的：
所以，给第一个p元素设置margin-bottom:10px;的意思就是在第一个p元素的border-bottom边线下10px的位置，设置一条拦截线，阻止之后的框被水流冲过这条线。
而如果设置margin-bottom:-10px的话，拦截线就会被设置在第一段文字border-bottom边线上10px的位置，之后的框会从那里开始流动，也就是会覆盖住第一段文字10px。按照这个逻辑，在这个例子中，给第一段文字设置margin-bottom:-10px和给的二段文字设置margin-top:-10px的效果是相同的，因为他们都把拦截线设置在了同一个地方。
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式