DIV CSS 佈局教程網

垂直方向上的外邊距會疊加，假設有3個段落，前後相接，而且都應用以下規則：

1. <style type="text/CSS">
2. p{
3. color: black;
4. background: #ccc;
5. margin-top: 50px;
6. margin-bottom: 30px;
7. height: 50px;
8. border: 1px solid red;
9. }
10. </style>

第一段的下外邊距與第二段的上外邊距相鄰，你可能認為它們之間的外邊距是80px，但實際的間距卻是50px。像這樣的上下外邊距相遇時，它們就會相互重疊，直至一個外邊距碰到另一個元素的邊框。因此，在這裡，第二段較寬的上外邊距就會碰到第一段的邊框。也就是說，較寬的外邊距決定兩個元素最終離多遠。這個過程就是外邊距疊加。