### 一. 父元素中第一個子元素margin-top無效問題 **這個問題發生的原因是根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。** 如下: ``` <div class="parent"> <div class="child"></div> </div> ``` ``` * { padding: 0; margin: 0; } .parent { width: 200px; height: 100px; background: yellowgreen; } .child { width: 100px; height: 100px; background-color: aqua; margin-top: 30px; } ``` 顯示效果如圖：  此時，雖然設置了`.child`margin-top為30px, 但是父元素與子元素一起往下移了。 再說白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執行。 ### 二. 解決辦法： 1.給父元素加一個邊框或者padding-top 2.給父元素加一個overflow: auto或者hidden 3.利用`before`偽類給父元素創建空白區域，使第一個子元素變成空table偽類，既可解決（推薦） 如： ``` .parent::before { display: table; content: ""; } ```