这个其实是 CSS 外边距合并产生的问题。
关于 CSS 的 margin 的详细问题,我已经在我之前的博文中详细的讲过了,有兴趣的可以直接点击这个链接:
http://blog.csdn.net/man_tutu/article/details/54987177
言归正传,让我们来看一下这次的问题:
这是我的HTML代码,非常的简洁:
<div id='father'>
<div id="son"></div>
</div>
下面的是我的CSS代码:
#father {
width: 300px;
height: 300px;
background: orange;
}
#son {
width: 100px;
height: 100px;
margin: 50px;
background: red;
}
那么最后产生的结果如下:
大家可以看到,这里子元素的margin-top顶开了父元素与父元素相邻元素的间距。
那么这个问题要怎么解决呢?
我所知道的有三种方法:
1、为父元素设置padding。
2、为父元素设置border。
2、为父元素设置 overflow: hidden
。
1、为父元素设置padding:
#father {
width: 300px;
height: 300px;
background: orange;
padding: 1px;
}
#son {
width: 100px;
height: 100px;
margin: 50px;
background: red;
}
实现效果:
2、为父元素设置border:
#father {
width: 300px;
height: 300px;
background: orange;
border: 1px solid #000;
}
#son {
width: 100px;
height: 100px;
margin: 50px;
background: red;
}
实现效果:
3、为父元素设置 overflow: hidden
:
#father {
width: 300px;
height: 300px;
background: orange;
overflow: hidden;
}
#son {
width: 100px;
height: 100px;
margin: 50px;
background: red;
}
实现效果: