美文网首页
HTML5:子DIV设置margin-top影响父DIV位置的解

HTML5:子DIV设置margin-top影响父DIV位置的解

作者: MxlZlh | 来源:发表于2016-12-13 11:24 被阅读50次

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

相关文章

网友评论

      本文标题:HTML5:子DIV设置margin-top影响父DIV位置的解

      本文链接:https://www.haomeiwen.com/subject/jinvmttx.html