什么叫做margin“塌陷”呢？
其实margin“塌陷”就是指在css中，外边距塌陷现象。是发生在相互嵌套的块级元素，给子元素设置上外边距，会导致父元素也起跟着掉下来。
例子：
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<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>举个栗子</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.father {
width: 200px;
height: 200px;
background-color: #6cf;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
/* 儿子想要离家出走，带着爸爸一起走*/
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
那么我们该如何解决这个问题呢？目前，我了解到有如下几种方法：
方法一：设置边框
在father盒子中设置上边框，让父盒子与子盒子有一丢丢空隙，请看效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<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>举个栗子</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.father {
width: 200px;
height: 200px;
background-color: #6cf;
/* 就加在这里，颜色用透明就更隐秘了~ */
border-top: 1px solid transparent;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法二：设置内边距
在father盒子中设置上内边距，分隔父子元素的margin-top
效果图都是一样的，就不再贴了
<!DOCTYPE html>
<html lang="zh-CN">
<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>举个栗子</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.father {
width: 200px;
height: 200px;
background-color: #6cf;
/* 加在这里 */
padding-top: 1px;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法三：溢出隐藏
overflow: hidden 除了可以隐藏溢出的部分、清除浮动之外，还可以解决margin的塌陷问题。
<!DOCTYPE html>
<html lang="zh-CN">
<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>举个栗子</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.father {
width: 200px;
height: 200px;
background-color: #6cf;
/* 加在这里 */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法四：把父元素设置为行内块元素
其实这样的塌陷问题只会发生在块级元素之间，只要把其中一个块级元素转换成行内块元素，就能从根本上解决这个问题。
<!DOCTYPE html>
<html lang="zh-CN">
<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>举个栗子</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.father {
width: 200px;
height: 200px;
background-color: #6cf;
/* 加在这里 */
display: inline-block;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
/* 加在这里，我也试过，也是可以的 */
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
方法五：添加浮动
设置浮动也是可以的
<!DOCTYPE html>
<html lang="zh-CN">
<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>举个栗子</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.father {
/* 给父盒子添加浮动也是可以的 */
float: left;
width: 200px;
height: 200px;
background-color: #6cf;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
以上这些方法都是我目前了解到的，可以解决margin塌陷问题，相信还有很多其他方法可以解决，待以后学习到了就会继续更新哦~
希望可以帮助到努力学习的你，大家一起共同进步~ 加油！
