您的用户名未注册
什么是外边距塌陷？满足以下条件就会产生外边距塌陷现象：
- 产生在嵌套元素中（父元素与子元素）
- 垂直方向上的外边距合并现象（margin-top和margin-bottom）
话不多说,直接上代码进行演示:带你走向人生的的巅峰,哈哈哈
html:
<div class="father">
<div class="son"></div>
</div>
css:
<style>
*{
margin: 0;
padding: 0;
}
.father{
width:300px;
height:300px;
background-color:pink;
}
.son{
width:100px;
height:100px;
background-color:skyblue;
}
</style>
此时浏览器的效果图为:
那我们想让天蓝色的子元素距离粉色的父元素有一点距离,然后给子元素一个margin-top,代码如下:
<style>
*{
margin: 0;
padding: 0;
}
.father{
width:300px;
height:300px;
background-color:pink;
}
.son{
width:100px;
height:100px;
background-color:skyblue;
margin-top:50px;
}
</style>
咦~~这个时候我们就会发现这不是我们想要的效果…
给子元素一个上边距，父元素也跟着有了外边距，这就是外边距塌陷，那么我们应该怎么解决这个问题呢？
解决方案:
1. 给父元素加边框border
2. 给父元素加内边距padding
3. 给父元素加overflow:hidden
<style>
*{
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/*border: 1px solid pink;*/
/*padding: 1px;*/
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
}
</style>
此三种方式任意一种都可以轻松解决外边距塌陷问题,效果如图下图所示:
也就达到了我们之前想要的效果,是不是美滋滋…赶紧收藏以后备用吧…
