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

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