一、margin塌陷
父子嵌套元素垂直方向的 margin,
父子元素是结合在一起的,
他们两个会取其中最大的值
正常情况应该是父级相对于浏览器进行定位,
子级应该相对于父级定位的
但是 margin 塌陷是在父级相对于浏览器进行定位时,
子级没有相对于父级定位,
就像父级的棚子没有了一样子级相对于父级,
就像塌陷了一样
a.给父元素设置边框属性
b.将原本设置给子元素的margin属性修改为设置父元素的padding
c.给父子级其中一个设置浮动属性
d.给父子级其中一个设置position:absolute;属性
e.给父元素添加overflow: hidden;属性
f.给父子级元素其中一个设置display:inline-block;属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px
}
div{
width: 300px;
height: 300px;
background-color: #ccc;
margin:50px auto;
/*float: left;*/
/*padding-top: 100px;*/
/*border:1px solid #ccc;*/
}
div p{
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
display: inline-block;
/*overflow: hidden;*/
/*position: absolute;*/
/*float: left;*/
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
二、margin合并
兄弟级(行级元素不会发生margin合并)
合并规则:
1)如果两个数据均为正数,取绝对值较大的一个
2)如果两个数据均为负数,取绝对值较大的一个
3)如果两个数值一正一负,直接相加
a.将本应该设置给两个元素的外边距直接设置给一个元素
b.将其中一个元素放入div中,该div设置overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 30px;
}
.green{
background-color: green;
margin-right: 100px;
}
.red{
margin-left: 100px;
background-color: red;
}
.demo1{
background-color: skyblue;
margin-bottom: 100px;
}
.demo2{
background-color: green;
margin-top: 100px;
}
.wrapper{
overflow: hidden;
}
</style>
</head>
<body>
<span class="green">123</span>
<span class="red">234</span>
<div class="wrapper">
<div class="demo1">1</div>
</div>
<div class="demo2">2</div>
</body>
</html>