div标签margin-top失效不起作用怎么办?

发布时间:2020-10-04编辑:脚本学堂
有关div标签中margin-top失效问题的解决方法,margin-top属性失效的两种情况,通过浮动、子元素设置margin-top作用于父容器等方法,解决margin-top失效的问题。

一、div标签margin-top失效不起作用怎么办?

元素上级标签是div,已设置width和height属性。

在对元素使用margin进行调整的时候,无法生效。

对该元素的父元素属性设置:
overflow:hidden;
问题解决。

附,关于margin-top属性失效的解决方法

常出现两种情况:

1、margin-top失效

代码:
 

<div>
<divclassdivclass="box1">float:left</div>
<divclassdivclass="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作用于父容器

例子:
 

<divclassdivclass="box"style="height:100px;background:red;">
<divclassdivclass="box2">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