給第一個子元素加margin-top，父元素會向下移動的解決辦法

時間 2021-02-21

標籤 css html git github 學習 spa code htm blog get 欄目 CSS 简体版

原文原文鏈接

給第一個子元素設置margin-top上外邊距時，父元素總會跟着向下移動。

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    #son{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
    }
</style>

頁面效果：

這是margin外邊距坍塌致使的，按照css規範，兩個相鄰的元素之間的margin值會共用較大的那一個，而若是沒有上邊框或上內間距，嵌套的元素之間和同級的元素同樣知足使用這個規範的條件，父元素會擁有子元素同樣的上外邊距。要解決這個問題其實也很是簡單，這裏給出四種不一樣的解決方法。css

方法一：給父元素加overflow:hidden

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
        width: 200px;
        height: 200px;
        background-color: red;
        overflow: hidden;
    }
    #son{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
    }
</style>

效果如圖：
html

方法二：給父元素加border:1px solid transparent

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
        width: 200px;
        height: 200px;
        background-color: red;
        border-top: 1px solid transparent;
    }
    #son{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
    }
</style>

效果如圖：
git

方法三：父元素或子元素浮動

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    #son{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
        /* float: left; */      /* 浮動加在子元素上也能夠 */
    }
</style>

效果如圖：
github

方法四：父元素加padding-top:1px

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
        width: 200px;
        height: 200px;
        background-color: red;
        padding-top: 1px;
    }
    #son{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
    }
</style>

效果如圖：
學習