盒模型乍一看很简单，无非就是内容、内边距、边框和外边距。但是写起代码来你会发现并不简单，很多地方都很模糊，特别是外边距为负值的时候。
这篇文档主要说明两个问题：
1.外边距叠加
2.外边距为负值
首先说明两个基本的要点：
1.如果给元素添加背景，背景会应用于内容和内边距组成的区域。
2.width和height是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，只会增加元素框的总尺寸。
特别说明，如果将元素的box-sizing属性设置为"border-box"，则width和height表示的是内容、内边距和边框组成区域的高度和宽度。所以增加外边距对内容区域的尺寸没有影响，而增加内边距和边框会导致内容区域的尺寸减小。
现在开始讨论第一个问题：外边距叠加
外边距叠加是指当两个或更多垂直外边距相遇时，外边距的高度等于这几个外边距的高度中的较大者。这就是外边距叠加的情况，并且外边距叠加只发生在垂直外边距上。
外间距叠加有三种情况：
l 元素自身叠加
l 相邻元素叠加
l 包含元素叠加
元素自身叠加
如果有一个空元素，只有外边距而没有边框或内边距，顶外边距和底外边距就碰到一起发生叠加。
相邻元素叠加
当一个元素出现在另一个元素上面是，上面那个元素的底外边距与下面那个元素的顶外边距就会发生叠加。
包含元素叠加
当一个元素包含在另一个元素中时，如果没有内边距或边框将外边距隔开，它们的顶/底外边距也会发生叠加。
外边距叠加有什么用呢？一个最简单的例子就是段落。如果没有外边距叠加，那么从第二个段落开始，段落间距就会是第一个段落上面的空间的两倍。
最后的说明：只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外间距不会叠加。
接下来讨论外边距为负值的情况：
举个具体的例子说明，假如margin-right: -150px;
分两步理解：
1.假设margin-right: 0;，内容区域不变
2.此时加上margin-right: -150px;布局变成
所以margin-right取负值就是右边的区域变成外边距，以容纳其他元素（假设是元素B)。需要注意的是如果不正确设置该元素中的子元素的外间距，就会与B元素发生重叠。
外间距设置为负值主要是可以用于生成边栏。
额外说明：只有外边距才可以是负值，内边距不允许为负值。