今天小编跟大家讲解下有关css设置margin-top失效及解决办法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css设置margin-top失效及解决办法 的相关资料，希望小伙伴们看了有所帮助。
在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况:
一、兄弟元素之间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>"二、子元素设置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则是严格遵守规范的。
来源：爱蒂网
