一、什么是margin塌陷
在标准文档流中,竖直方向的margin会出现叠加现象(水平方向不会塌陷),两个margin紧挨着,中间没有border或者padding
margin直接接触,就产生了合并
表现为较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的margin,这就是margin塌陷现象
先举个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color:#000;
}
.wrapper{
width:200px;
height:200px;
background-color:red;
margin-top:50px;
}
.box{
width:50px;
height:50px;
background-color:pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
距离上边100px;
-
现在给里面的小方块设置margin-top:50px;发现两个方块位置没动;
-
而当给里面的小方块设置margin-top:100px;小方块带着大方块往下移动了50px
原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.
正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.
但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.
二、margin塌陷解决方法
1.给父级设置边框或内边距(不建议使用)
.wrapper{
width:200px;
height:200px;
background-color:red;
margin-top:100px;
border-top:1px solid black;/*padding-top:1px*/
}
2.触发bfc(块级格式上下文)改变父级的渲染规则
方法:改变父级的渲染规则有以下四种方法
给父级盒子添加
-
position:absolute/fixed
-
display:inline-block;
-
float:left/right
-
overflow:hidden
这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷
3.使用伪元素(推荐使用)
/* 方法一 */
.clearMar::before{
content: "";
display: table;/* 因为外边距无法通过单元格元素折叠 */
}
/* 方法二 */
.clearMar::before{
content: "";
display: block;
overflow: hidden;
}
伪元素之所以被称为伪元素,就是因为他们不是真正的页面元素,html没有与之对应的元素,但是其用法和表现行为和真正的元素一样,所以被成为伪元素。
三、解决方法总结:
-
为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合
(可以设置成透明:border:1px solid transparent)(不推荐)
-
为父盒子设定padding值;(不推荐)
-
触发bfc(会有不同的麻烦)
- 为父盒子添加position:absolute/fixed;
- 为父盒子添加display:table;
- 为子盒子添加float:left/right;
- 为父盒子添加overflow:hidden;
-
给父盒子添加伪元素(before)(推荐);