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之间增加一层"

2、子元素设置margin-top作用于父容器


class="box" style="height:100px;background:red;">   class="box2" style="clear:both; margin-top:20px; height:50px; width:500px; background:#000;"

当给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则是严格遵守规范的。

本文完~