子DIV设置margin-top影响父DIV位置的解决办法

子DIV设置margin-top影响父DIV位置的解决办法

2015-07-23 12:42:22 来源：威易网 作者：icech

在设置子DIV的margin-top时候，如果与父DIV之间无任何元素的间隔，那么就会让父DIV的位置收到影响。如图：

在设置子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实现效果。