如何解决CSS设置margin-top失效问题

前端 潘老师 3个月前 (11-30) 65 ℃ (0) 扫码查看

本文主要讲解关于如何解决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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12024.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】