垂直方向上的外邊距會疊加，這可是你必須得知道的一件事。
假設有3個段落，前后相接，而且都應用以下規(guī)則：
/為簡明起見，省略了字體聲明/
p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; margin-bottom:30px;}
由于第一段的下外邊距與第二段的上外邊距相鄰，你自然會認為它們之間的外邊距是80像
素（50+30），但是你錯啦！它們實際的間距是50像素。像這樣上下外邊距相遇時，它們就
會相互重疊，直至一個外邊距碰到另一個元素的邊框。就上面的例子而言，第二段較寬的
上外邊距會碰到第一段的邊框。也就是說，較寬的外邊距決定兩個元素最終離多遠，沒錯
——50像素。這個過程就叫外邊距疊加。
如上圖所示 ：
垂直外邊距疊加（或者叫重疊），直到一個元素的外邊距碰到另一個元素的邊框為止。
注意啦，疊加的只是垂直外邊距，水平外邊距不疊加。對于水平相鄰的元素，它們的水
平間距是相鄰外邊距之和。這跟你最初想的一樣。
外邊距的單位選擇 ：
根據(jù)經(jīng)驗，為文本元素設置外邊距時通常需要混合使用不同的單位。比如說，一個段落的
左、右外邊距可以使用像素，以便該段文本始終與包含元素邊界保持固定間距，不受字號
變大或變小的影響。而對于上、下外邊距，以em為單位則可以讓段間距隨字號變化而相應
增大或縮小，比如：
/這里使用了簡寫屬性把上、下外邊距設置為.75em，把左、右外邊距設置為30像素/
p {font-size:1em; margin:.75em 30px;}
這樣，段落的垂直間距始終會保持為字體高度的四分之三（上下外邊距都是.75em，疊加后
還是.75em）。如果用戶增大了字號，那么不僅段落中的文本會變大，段間距也會成比例變
大。這樣，頁面的整體布局就會比較協(xié)調一致。與此同時，使用像素單位的左、右外邊距
不會改變。我想，你應該也不會想讓字號變化影響到布局寬度吧。
