当前位置:主页 > 教程 > 网页设计 > div/css >

css父元素与子元素之间的margin-top问题

作者:秋军 发布时间:2017-04-20 阅读:

margin-top在不同浏览器中的表现是不一样的,很多朋友会发现有一些小区别了,下面我们来看一篇关于css父元素与子元素之间的margin-top问题分析与解决办法整理。

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
 
html代码:

<div class="box1"> 
<div class="box2"></div> 
</div>

css样式:

.box1{height:200px;width:200px;background:gray;} 
.box2{height:100px;width:100px;background:gold;margin-top:50px;}

解决方法:

1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位


在某些浏览器中,当给层内元素设置margin-top时,层内元素并没有margin,而是父层出现了margin-top,这往往让人很费解吧。。

解决办法有:

1.给父层添加:overflow:hidden;
2.给父层添加:border除none以外的属性
3.给父层添加:padding-top代替margin-top的效果。