盒模型：外边距叠加和外边距为负值

盒模型乍一看很简单，无非就是内容、内边距、边框和外边距。但是写起代码来你会发现并不简单，很多地方都很模糊，特别是外边距为负值的时候。

这篇文档主要说明两个问题：

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元素发生重叠。

外间距设置为负值主要是可以用于生成边栏。

 

额外说明：只有外边距才可以是负值，内边距不允许为负值。