下面代码就是一个外边距塌陷的例子: 这种是 两个父子元素
<!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>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<style>
.father {
width: 300px;
height: 200px;
background-color: black;
}
.son {
width: 200px;
height: 150px;
background-color: red;
margin-top: 50px;
}
</style>
子盒子给了margin-top,父元素也会受到影响,也产生margin-top, 解决办法是,给父元素加 overflow:hidden 或者是 border: 1px solid transparent 解决真正意义上的贴合问题
当然啦,给父盒子加padding, 给父盒子固定定位,给父盒子加 display:table
还有一个是在父元素前加一个空元素,也是解决贴合问题
.father::before{
content:'',
display:table
}
第二种情况是两个同级元素:
上面的盒子加margin-bottom,下面盒子加margin-top,按照我们的想法应该是两个盒子之间间距是
margin-bottom + margin-top 的和。 实际是按照数值最大的计算,上面的例子来看,距离就是30px
这也是塌陷的一种,如何解决呢? 就是这两个外边距不要同时出现