margin设置两个标签边框之间的距离，但是会有两种现象：
1、margin外边距的合并现象
如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后取值较大的那个
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 200px;
height: 100px;
background: red;
margin-bottom: 30px;
}
.two {
width: 200px;
height: 100px;
background: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
</body>
</html>
可以发现两个盒子的距离为50px，div1的margin还是30px，但是div2的margin更大，所以浏览器在渲染的时候选择较大的margin值。
2、Margin 塌陷现象
如果一个大盒子中包含一个小盒子，给小盒子设置margin-top，大盒子会跟小盒子一起向下平移。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.one {
width: 200px;
height: 200px;
background: red;
}
.two {
width: 150px;
height: 150px;
background: green;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
解决方法margin塌陷的办法由两种：
1、给大盒子设置边框
border: 1px solid #000;
2、给大盒子设置overflow：hidden
overflow: hidden;
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
