margin重叠发生的情况:
1、只发生在block元素上,不包括float、absolute、inline-block元素
2、只发生在垂直方向上
margin重叠总结如下:
1、相邻兄弟元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
p {
background-color: #a0ffb3;
height: 100px;
margin: 100px 0;
}
</style>
</head>
<body>
<p>margin重叠</p>
<p>margin重叠</p>
</body>
</html>
2、父级元素和第一个或最后一个子元素(margin传递)
父子级margin重叠需要满足以下几个条件:
01、父元素不是BFC元素
02、父元素没有padding-top值
03、父元素没有border-top值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
.parent {
background-color: #fff48c;
height: 50px;
}
.child {
margin-top: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">自元素</div>
</div>
</body>
</html>
3、空的block元素
必须满足的条件:
01、元素没有border值=
02、元素没有padding值
03、元素里面没有inline元素
04、没有height
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
.parent {
background-color: #fff48c;
overflow: hidden;
}
.child {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
margin重叠
</body>
</html>