1.垂直外边距合并概念
垂直外边距合并是指两个垂直外边距相遇时，如果他们之间没有padding或border隔开的话，它们将形成一个外边距，合并后的外边距的高度等于其中较大者。主要出现在以下两种情况中：
- 当一个元素出现在另一个元素的上方，则上一个元素的margin-bottom和margin-top就会发生合并。
- 当一个元素包含在另一个元素中时，它们的上下边距会发生合并。
垂直外边距合并最初设计的作用是用在段落之间，防止因为margin-top和margin-bottom，段落之间间距太大。
注意：只有普通文档流中的垂直外边距才会发生合并，行内框，浮动框和据对定位之间的外边距不会发生合并。
2.由此引发的问题
很常见的一个网站底部区域如下：
<style type="text/css">
.text{
margin-top: 10px;
}
</style>
<div class="footer">
<div class="text"></div>
</div>
本意是想让text区域离它的父元素footer有一段距离，可是实际的效果却是让父元素离上一个元素有一段距离，这个就是因为父元素和第一个子元素的margin-top合并了。
这个时候想到两种解决方法，一种是为父元素添加一个border-top，另一种是为父边框添加一个padding-top，但是总有一种修修补补的感觉，就去查了一下有关内边距和外边距的博客，其中这一篇分析得最到位：http://www.cnblogs.com/ilinuxer/p/5814687.html
3.用margin还是padding
- 何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。 - 何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。
总结：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
4.回到问题本身
所以针对上面的底部问题，可以先分析一下，text是footer的子元素，text元素中的内容为底部文本信息，所以这两种之间的关系更确切来说应该是元素和内容之间的关系，需要一段呼吸距离，而非元素间的间隔，所以这里使用padding最恰当，也能一定程度减少代码量。
