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

文
章
目
录

• 1、兄弟元素之间margin–top失效
• 2、子元素设置margin-top作用于父容器

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