什么是margin塌陷
在标准文档流中,竖直方向的margin会出现叠加现象(水平方向不会塌陷),两个margin紧挨着,中间没有border或者padding
margin直接接触,就产生了合并
表现为较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin塌陷现象
解决margin塌陷的方法
- 1. 设置边框
- 2.overflow:hidden 溢出隐藏
- 3.name:before{content:''; display:table;}设置伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 解决margin塌陷的两种方法
1. 设置边框
2.overflow:hidden 溢出隐藏
3. .name:before{content:''; display:table;}设置伪类
*/
.box{
height: 12.5rem;
width: 12.5rem;
background-color: aquamarine;
/* border: 1px solid #000000; */
}
.nbox{
margin-top: 3.125rem;
height: 3.125rem;
width: 3.125rem;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="nbox"></div>
</div>
</body>
</html>
父盒子没有设置边框,子盒子的margin合并到了父类上,造成了塌陷。
加上边框
塌陷问题就解决了。
overflow:hidden 隐藏溢出
.box{
height: 12.5rem;
width: 12.5rem;
background-color: aquamarine;
/* border: 1px solid #000000;*/
overflow: hidden;
}
为父盒子添加隐藏溢出也能解决margin塌陷。