玛珍，玛珍，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块级格式化上下文，创建隔离的容器

html 复制代码

<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.子元素浮动定位，父元素清除浮动

html 复制代码

<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布局

html 复制代码

<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>