問題：父元素的盒子包含一個子元素盒子，給子元素盒子一個垂直外邊距margin-top，父元素的盒子也會受到子元素的margin-top值的影響。

原因：所有毗鄰的兩個或者多個元素的margin將會合併為一個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容。padding或者border分隔。其中float和position（css2.1浮動元素和絕對定位元素不參與margin摺疊）

解決方法：

1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；新增界限） 
2、為父元素新增overflow：hidden；樣式即可（讓父元素成為BFC，內部佈局不受外部影響） 
3、為父元素或者子元素宣告浮動（float:left或者position）（浮動元素的margin垂直方向不疊加） 
4、為父元素新增border （border：1px solid transparent）（新增界限） 
5、為父元素或者子元素宣告絕對定位（BFC）

參考網站網站：https://www.cnblogs.com/cjw-ryh/p/6876214.html