章
目
录
本文主要讲解关于如何解决CSS设置margin-top失效问题相关内容,让我们来一起学习下吧!
在web网站开发中,有时候我们给html元素设置的margin-top或margin-bottom属性,但是无效,并没有取到任何作用,这是什么原因呢?常出现两种情况:
1、兄弟元素之间margin-top失效
先看下面代码:
<div>
<div class="box1"> float: left </div>
<div class="box2"> clear:both; margin-top:20px; </div>
</div>
两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果。网上能找到的两种比较靠谱的解释:
1):“在css2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…”2):当第一个层浮动,而第二个没浮动层的margin会被压缩,详见–浮动元素后非浮动元素的margin的处理。
得到解决问题思路:要浮动一起浮动,要不就都不浮动。解决办法:
1)、box2增加float属性
2)、box1与box2之间增加一层”<divstyle=”clear:both;”></div>”
2、子元素设置margin-top作用于父容器
<div class="box" style="height:100px;background:red;">
<div class="box2" style="clear:both; margin-top:20px; height:50px; width:500px; background:#000;"</div>
</div>
当给box2设置margin-top时,在FF下仅作用于父容器。解决办法:
1)、给父容器box加overflow:hidden;属性2)、父容器box加border除none以外的属性3)、用父容器box的padding-top代替margin-top
总结
现象:当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。
就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。
解决方法:
1)、设置父元素或者自身的display:inline-block;2)、设置父元素的border:1px aqua solid;(>0)3)、设置父元素的padding:1px;(>0)4)、给父元素设置overflow:hidden;5)、给父元素或者自身设置position:absolute;6)、设置父元素非空,填充一定的内容。
这个现象并不是bug,而是有理论依据的:
《on having layout》hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
但值得一提的是,只有在FF和Chrome下才会出现这种margin-top绑架父节点的情况,在IE6 IE7中均显示正常,但这恰恰说明了他们是不符合规范的,而FF合Chrome则是严格遵守规范的。
以上就是关于如何解决CSS设置margin-top失效问题相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!