在設置子DIV的margin-top時候，如果與父DIV之間無任何元素的間隔，那么就會讓父DIV的位置收到影響。如圖：

代碼如下：
<style>
.zb-tips{ margin-top: 30%; }
</style>
<div class="zb-container">
    <div class="ui-tips ui-tips-warn zb-tips">
        <i></i><span>簽到失敗！請下載并安裝“xxx”APP掃描二維碼</span>
    </div>
</div>

原因是：所有毗鄰的兩個或更多盒元素的margin將會合并為一個margin共享之。毗鄰的定義為：同級或者嵌套的盒元素，并且它們之間沒有非空內容、Padding或Border分隔。這個問題的避免方法很多，只要破壞它出現的條件就行。給 Outer Div 加上 padding/border，或者給 Outer Div / Inner Div 設置為 float/position:absolute(CSS2.1規定浮動元素和絕對定位元素不參與Margin折疊)。

如何解決這個問題呢？方法有多個：

方法1：在父DIV的css加上“overflow:hidden;”。這種方法是目前來看最完美的解決辦法。

方法2：在父DIV的css加上“border:1px solid transparent;”。

方法3：在父DIV的css加上float或者position:absolute。

方法4：在父DIV的css加上padding-top來代替margin實現效果。