外边距区域 Margin area

Docs

简介

外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

margin 属性用于设置盒子的外边距，通常用于元素和元素之间的间距；
margin 包括四个方向，所以有如下的取值：
- margin-top：上内边距
- margin-right：右内边距
- margin-bottom：下内边距
- margin-left：左内边距

margin 单独编写是一个缩写属性：

margin 也并非必须是四个值，也可以有其他值;

margin 值的个数	margin 例子	代表的含义
4	`margin: 10px 20px 30px 40px;`	top: 10px, right: 20px, bottom: 30px, left: 40px;
3	margin: 10px 20px 30px;	缺少 left, left 使用 right 的值;
2	`margin: 10px 20px;`	缺少 left, 使用 right 的值; 缺少 bottom, 使用 top 的值;
1	`margin: 10px;`	top/right/bottom/left 都使用 10;

上下 margin 的传递
- margin-top 传递
  - 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素
  - margin-bottom 传递
    - 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素
  - 如何防止出现传递问题？
    - 给父元素设置 padding-top / padding-bottom
    - 给父元素设置 border
    - 触发 BFC: 设置 overflow 为 auto
- 建议
  - margin 一般是用来设置兄弟元素之间的间距
  - padding 一般是用来设置父子元素之间的间距
上下 margin 的折叠
- 垂直方向上相邻的 2 个 margin（margin-top, margin-bottom）有可能会合并为 1 个 margin，这种现象叫做 collapse（折叠）
- 水平方向上的 margin（margin-left, margin-right）永远不会 collapse
- 折叠后最终值的计算规则：两个值进行比较，取较大的值
- 防止 margin collapse：只设置其中一个元素的 margin
上下 margin 折叠的情况
- 两个兄弟块级元素之间上下 margin 的折叠
- 父子块级元素之间 margin 的折叠