玛珍，玛珍，margin！
最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：margin，当时觉得其读起来很亲切，现在又发现很多遗忘的知识点。
了解margin
margin，译为“外边缘”，在CSS作为属性定义元素周围的空间，从以下盒模型中能更好的理解margin。
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
margin属性可以有一到四个值。
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
margin负值
- margin-top、left负值：元素向上、向左移动
- margin-right负值：右侧元素左移，自身不收影响；当右边无元素，其实就是缩小自身宽度。
- margin-bottom负值：下方元素上移，自身不受影响
margin塌陷
margin塌陷（又称margin重叠）指文档流内，块级元素与块级元素垂直方向上的 margin 合并（塌陷）为单个 margin，且只发生在垂直方向。行内元素不存在margin 塌陷，因为行内元素不占有外边距，同样道理float元素也不存在margin合并。
总结为：
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的标签也会重叠
解决方案：
1.BFC块级格式化上下文，创建隔离的容器
<body>
<style>
.aa {
display: flex;
flex-direction: column;
width: 300px;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
margin-top: 10px;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
2.子元素浮动定位，父元素清除浮动
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.clearfix:after {
content:'';
display: table;
clear:both;
}
</style>
<div class="aa clearfix">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;float:left;"></div>
</div>
</body>
3.修改代码，添加空div，设置为flex布局
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div style="display: flex;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
更多参考：https://blog.csdn.net/Celester_best/article/details/127455732
