Margin
page relative(Physical)Margin 属性（页相对外边距属性）
| margin | |
|---|---|
| margin-top(margin-right、margin-bottom、margin-left) | |
| 值 | <length-percentage> | auto |
| 应用于 | 所有元素除了internal table elements(table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column) |
| 默认值 | 0 |
| 百分比 | 相对于containing block 的logical width |
| 继承性 | 无 |
| 动画性 | 通过计算值 |
Flow-relative Margin 属性（页相对外边距属性）
| Flow-relative Margin | |
|---|---|
| margin-block-start | |
| margin-block-end | |
| margin-inline-start | |
| margin-inline-end | |
| margin-block | |
| margin-inline |
垂直外边距合并
不会合并的情况
- 根元素的margin不会合并
- If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.（暂不理解）
- FFC和GFC内部不会有margin合并
合并的条件
- 都属于in-flow block-level boxes且参与同一个BFC
- 没有line boxes,没有clearance,没有padding,没有border分隔他们
- 都属于垂直相邻box边缘,即形成以下一对
a.box的margin-top与第一个in-flow子元素的margin-top
b.box的margin-bottom与同级下一个in-flow元素的margin-top
c.box（如果height计算为auto）的margin-bottom与最后一个in-flow子元素的margin-top
d.box(如果不形成新的BFC)的margin-top和margin-bottom和min-height计算值为0或height计算为auto且没有In-flow子元素
上述规则表明
- 浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）
- 建立了新的块格式化上下文的元素（例如，浮动盒与’overflow’不为’visible’的元素）的margin不会与它们的流内孩子合并绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）
- inline-block盒的margin不会合并（甚至与它们的流内子级也不会）
- 流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非该兄弟（元素）具有间隙
- 流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，条件是该元素没有上边框和上内边距，并且其孩子不具有间隙
- 一个’height’为’auto’并且’min-height’为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，条件是该盒没有下内边距和下边框，并且其孩子的下外边距没有与具有间隙的上外边距合并
- 盒自身的外边距也会合并，条件是’min-height’属性为0，既没有上下边框，也没有上下内边距，’height’为0或’auto’，且不含行框的话，那么其所有流内孩子的外边距（如果存在的话）都会合并
注：min-height设置值小于他现在的高度都可以视为0