本文着重描述关于 margin，我们日常不太容易发现的“坑”。
盒模型
接触过 CSS 的人应该都知道 CSS 的盒模型：
由内容边缘（Content edge）包围形成的是内容盒（Content Box），类推还有内边距盒（Padding Box）、边框盒（Border Box）、外边距盒（Margin Box）。
其中内容盒、内边距盒、边框盒的背景由background属性决定，而外边距盒的背景是透明的。
CSS margin 属性
关于 margin 属性，有几点可能跟我们的直觉不相符：
1、如果 margin 的值是百分比，则是相对于父元素的内容盒宽度来计算的，即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高宽不相等，子元素的 margin 元素指定了相同的百分比值，则子元素各个方向的 margin 计算值都是相等的。
2、margin-top 和 margin-bottom 值对行内非替换元素（non-replaced inline element）是无效的。因此我们可以指定 img 元素的 margin-top 和 margin-bottom，而非替换行内元素（如 i，span 等）设置 margin-top 和 margin-bottom 却不会产生效果。
相邻的 margin（Adjoining margin）
如果两个垂直方向上的 margin，它们中间没有其他垂直 margin，但它们之间不一定相接触，我们就说这两个 margin 是垂直毗连（vertical-adjacent）的，包括以下四种情况，满足其中之一即可：
父元素的 top margin 和第一个子元素的 top margin
父元素的bottom margin 和最后一个子元素的 bottom margin
元素的 bottom margin 和与这个元素相邻的兄弟元素的 top margin
如果一个元素，它没有生成 BFC、没有包含正常流的子元素、min-height是0、height是0或者 auto，则它的 top margin 和 bottom margin 也是垂直毗连的
如果两个 margin 满足以下三个条件，我们就说这两个 margin 是相邻（adjoining）的：
1、这两个 margin 是垂直毗连的，即满足上面四种情况之一
2、margin 的两个元素都是正常流的块级元素，并且在同一个 BFC 中
3、两个 margin 之间没有行盒（line box）、清除浮动后的空隙（clearance）、padding和 border
margin 折叠（Collapsing margins）
margin 折叠，即相邻的 margin 有可能会被折叠成一个。
比如元素 #a 指定了 margin-bottom 为 10px，而它下方的元素 #b 指定了 margin-top 为 20px，如这样：
元素 #a 的 margin-bottom 和元素 #b 的margin-top 在位置上重叠了，它们之间的距离是 20px，即元素 #b 的 bottom margin 长度，这就是 margin 折叠现象。关于这个现象，可以这么理解：
margin 定义的是它与其他盒子之间的最小间距。其中元素 #a 指定了 margin-bottom 为 10px，就表明它下方的元素 #b 与它至少要有 10px 的距离，它指定的是一个最小值，因此实际的距离可以比这个大。
