咨询电话:
15628812133
03
2017/08

为什么有时设置的margin-top属性不管用?

发布时间:2017-08-03 09:23:13
发布者:jiangbing
浏览量:
0

有时候大家可能会遇到奇怪的现象,尽管没有任何的语法错误,但是设置的margin-top属性不会起作用,下面就就结合代码实例介绍一下产生此现象的原因和解决方法。

原因一:

外边距合并margin-top属性失效。代码实例如下:





文汇软件

.first{
  width:100px;
  height:100px;
  background-color:red;
  margin-bottom:60px;
}
.second{
  width:100px;
  height:100px;
  background-color:green;
  margin-top:40px;
}




从以上代码的运行可以看出,第二个div设置的margin-top并没有生效,起作用的是第一个div的设置的margin-bottom,这里有个规律,那就是合并后的外边距的高度等于外边距的高度中的较大的一个,所以遇到此种情况可以格外注意外边距大小的设置。

原因二:

子元素和父元素也可能会导致设置的子元素上外边距失效情况,代码实例如下:





文汇软件

.father{
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}
.children{
  width:100px;
  height:100px;
  background-color:blue;
  margin-top:10px;
}





  

解决方法:

为父对象在相应的外边距方向上有边框(border)和内边距(padding),或者为overflow属性值设置为hidden即可避免。

演示地址:http://www.cnwenhui.cn/d/demo/top/

上一篇: 从变量看javaScript
下一篇: animate在不支持display属性后该怎么办?
关键词:
返回列表
相关文章
相关案例
热门文章
最新文章