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

关键词:css

赞助商链接: