前端CSS子元素margin-top穿透問題

　　當我們在給子元素設置margin-top后會出現一個現象，子元素與父元素之間沒有出現間距，反而是父元素和其他元素之間出現了間距，像是margin-top的效果作用在父元素上一樣。這種現象就是margin-top穿透現象。

　　如下所示：

　　HTML代碼

<div class="father">
    <div class="son">
                
    </div>
</div>

　　CSS代碼

*{
    margin: 0;
    padding: 0;
}
.father{
    width: 400px;
    height: 300px;
    background-color: red;
    }
.son{
    width: 200px;
    height: 150px;
    background-color: green;
    margin-top: 100px;
                
    }

　　我們希望的是子盒子的上邊距距離父盒子100px，但實際上效果是父盒子距離瀏覽器的頂線隔開了100px，如下圖所示：

　　經過查找資料和測試發現，發生這樣的現象需要兩個條件：

　　1：父、子元素都為塊級元素

　　2：父、子元素必須頂部線重合

　　所以解決這種現象我們只需要打破這兩個任意條件即可。

　　解決方案：

　　一：父、子任意元素設置display:inline-block。

　　二：設置父元素padding-top：1px

　　三：設置父元素border-top