問題由來

在對巢狀元素的子元素進行垂直方向上的居中操作時，採用margin-top會出現父元素和子元素一同下移的現象無法達到想要的效果。

<!--html程式碼塊-->
<div id="father">
    <div id="son"></div>
</div>

 /*部分css程式碼塊*/
   #son {
           background-color: #5A688F;
           width:50px;
           height: 50px;
           margin-left: 25
 
px;/*子元素水平居中*/
           margin-top: 25px;/*試圖將子元素垂直居中*/
        }

第一幅圖是未設定margin-top: 25px;時的效果圖：

第二幅圖是設定了 margin-top: 25px;之後的效果圖

分析：從第二張圖片中可以看出來父元素和子元素一起發生了下移現象，沒有達到子元素垂直居中的效果。整個現象的造成涉及到外邊框疊加的現象。接下來進行分析

外邊距疊加定義：
外邊距疊加指的是在普通文件流中的塊級元素的垂直外邊距出現疊加現象。而要特別注意的是：行內框，浮動框，或者絕對定位框的外邊距是不會疊加的。

場景一：

相鄰塊級元素垂直外邊距疊加

 /*部分css程式碼塊*/
#d1 {
        background-color: #5A688F;
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-bottom: 20px;
        }
#d2 {
        background-color: yellow;
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-top
 
: 20px;
        }

如圖，當兩個塊級元素垂直襬放時時，他們的外邊距不是40px而是疊加後的20px。（如果一大一下，疊加後的邊距為大的那一個）；
原理分析：實際上外邊距疊加的意義非常的大，margin的存在意義是將兩個相鄰的元素分隔開來。如果不出現外邊距疊加，那麼像上邊的兩個相鄰元素的垂直距離就已經是40px了，瀏覽器不允許造成如此大的浪費，所以出現了垂直距離上的外邊距疊加，在進行網頁佈局的計算的時候一定要注意。

場景二：

巢狀元素中的外邊距疊加現象：
在場景一中已經分析得出來外邊距疊加的時候最終的距離是最大的那一個。
注意：
這裡涉及到一個特性，塊元素的margin外邊距非常的囂張，在他附近存在元素的時候，他就一定要湊上去，從相鄰元素的padding或者border開始撐開margin距離，如果相鄰的元素沒有padding和border，那就會一直頂到content。

請耐心聽我嗶嗶！！！

因此，我用上邊的特性來解釋一開始出現的那個問題，父元素沒有padding和border，所以給子元素設定margin-top的時候，子元素這往上一頂就沒有絲毫阻攔的直接頂到了body上，一個margin-top就想撐開25px；話說，力的作用是相互的。這就相當於父元素上邊的元素設定了一個margin-bottom反作用給父元素，想將它推開25px；可是由於父元素沒有border和padding，所以就會直接作用在父元素的content內容區上，但是父元素的content內容區就是子元素的區域，子元素也沒有padding和border直接作用在了子元素身上；也就是說，我這一巴掌直接打到了兩個人的臉上，所以他們同時向下移動25px；

解決辦法：
1）給父元素增加一個border
2）給父元素增加一個padding-top
注意：上述兩個方法都是為了制止子元素margin的囂張氣焰。但是在標準盒子模型下改變padding和border會將盒子模型的佈局整個都會改變，所以不提倡使用；
3）給父元素新增overflow：hidden屬性，瀏覽器有可能是擔心子元素設定的margin-top太大，將自己撐出了父元素的範圍，所以就會自動下移，此時設定overflow屬性就會將父元素的躁動強行按下！

場景三：

第三種場景是一個空元素（沒有padding和border）的margin-top，margin-bottom也會疊加起來。舉這個例子就有點為難我胖虎了。。。。結論就是==這就是一系列空的段落元素佔用的空間非常小的原因了。

最後的總結

1）外邊距疊加不止發生在同等級的塊級元素，還發生在巢狀的元素身上。
2）空元素的上下margin也會出現合併的現象。

存在即是合理，分開即是不合適，透過現象看本質，紮實基礎。