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