margin-top、margin-bottom的一些分析

margin-top：表示該容器距離上面容器的距離

狀況一：若是該容器上面沒有容器，則這個樣式屬性則被父容器佔用了

html代碼以下：

<div id ="fa">
    <div id="son"></div>
        <div  style="height:30px; background:#ffd800;"></div>
    </div>
        <div id="br"></div>

css代碼以下：

 #fa {
        width:600px;
        height:600px;
        background:#f00;
        }
        #son {
        width:200px;
        height:200px;
        background:#4cff00;
        margin-top:30px;
        }

結果圖以下：

狀況二：若是該容器上面有容器，則父容器不佔用這個樣式屬性

html代碼以下：

<div id ="fa">
<div style="height:30px; background:#ffd800;"></div>
<div id="son"></div>
<div style="height:30px; background:#ffd800;"></div>
</div>
<div id="br"></div>

css代碼以下：

 #fa {
        width:600px;
        height:600px;
        background:#f00;
        }
        #son {
        width:200px;
        height:200px;
        background:#4cff00;
        margin-top:30px;
        }

結果圖以下：

 

 

 如何解決狀況一的問題：設置父容器超出的隱藏的樣式屬性overflow:hidden;