前端 margin的传递问题
2022-08-19 本文已影响0人
GuiiLiin
上下margin的传递
margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠 那么块级元素的margin-top值会传递给父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: red;
/* 设置overflow: auto会触发BFC */
overflow: auto;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
/* 设置margin-top会传递给父元素 */
margin-top: 100px;
}
</style>
</head>
<body>
<div>这是顶部</div>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
设置overflow: auto之前.png
设置overflow: auto之后.png
margin-bottom传递
如果块级元素的底部线和父元素的底部线重合，并且父元素的高度是auto，那么这个块级元素的margin-bottom的值会传递给父元素margin-bottom传递 父元素的高度必须是auto才会传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
/* 高度设置为auto才会传递margin-bottom */
height: auto;
background-color: red;
/* overflow: auto; */
}
.son {
width: 100px;
height: 100px;
background-color: orange;
/* 设置margin-top会传递给父元素 */
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div>这是底部</div>
</body>
</html>
设置高度是auto之前
设置高度是auto之后.png
防止传递方法如margin-top
如何防止出现传递问题
1.给父元素设置padding-top/padding-bottom
2.给父元素设置border
3.触发BFC：设置overflow为atuo
padding最好设置父子元素的间距margin最好设置兄弟元素的间距
