垂直方向上的外边距会叠加，这可是你必须得知道的一件事。
假设有3个段落，前后相接，而且都应用以下规则：
/为简明起见，省略了字体声明/
p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; margin-bottom:30px;}
由于第一段的下外边距与第二段的上外边距相邻，你自然会认为它们之间的外边距是80像
素（50+30），但是你错啦！它们实际的间距是50像素。像这样上下外边距相遇时，它们就
会相互重叠，直至一个外边距碰到另一个元素的边框。就上面的例子而言，第二段较宽的
上外边距会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远，没错
——50像素。这个过程就叫外边距叠加。
如上图所示 ：
垂直外边距叠加（或者叫重叠），直到一个元素的外边距碰到另一个元素的边框为止。
注意啦，叠加的只是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水
平间距是相邻外边距之和。这跟你最初想的一样。
外边距的单位选择 ：
根据经验，为文本元素设置外边距时通常需要混合使用不同的单位。比如说，一个段落的
左、右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间距，不受字号
变大或变小的影响。而对于上、下外边距，以em为单位则可以让段间距随字号变化而相应
增大或缩小，比如：
/这里使用了简写属性把上、下外边距设置为.75em，把左、右外边距设置为30像素/
p {font-size:1em; margin:.75em 30px;}
这样，段落的垂直间距始终会保持为字体高度的四分之三（上下外边距都是.75em，叠加后
还是.75em）。如果用户增大了字号，那么不仅段落中的文本会变大，段间距也会成比例变
大。这样，页面的整体布局就会比较协调一致。与此同时，使用像素单位的左、右外边距
不会改变。我想，你应该也不会想让字号变化影响到布局宽度吧。
