margin 的百分比值
margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的，在垂直方向上无法改变元素自身的内部尺寸，需要父元素作为载体，而且由于 margin 合并的存在，垂直方向往往需要双倍尺寸才能和 padding 表现一致
margin 合并：块级元素的上外边距与下外边距在一些情况下会合并为单个外边距，这种现象只发生在和当前文档流方向的相垂直的方向上
margin 合并的 3 种场景
1.相邻兄弟元素 margin 合并
2.父级和第一个/最后一个子元素
避免这种情况下margin-top 合并
（1）父元素设置为块状格式化上下文元素
（2）父元素设置 border-top 值
（3）父元素设置 padding-top 值
（4）父元素和第一个子元素之间添加内联元素进行分隔
避免这种情况下margin-bottom合并
（1）父元素设置为块状格式化上下文元素
（2）父元素设置 border-bottom 值
（3）父元素设置 padding-bottom 值
（4）父元素和最后一个子元素之间添加内联元素进行分隔
（5）父元素设置 height、min-height 或 max-height
3.空块级元素的 margin 合并
避免这种情况margin 合并
（1）设置垂直方向的 border
（2）设置垂直方向的 padding
（3）里面添加内联元素
（4）设置 height 或者 min-height
margin 合并的计算规则
正正取大值，正负值相加，负负最负值
margin:auto 的填充规则
1.如果一侧定值，一侧 auto，则 auto 为剩余空间大小
2.如果两侧均是 auto，则平分剩余空间
margin:auto 计算有一个前提条件，就是 width 或 height 为 auto 时，元素是具有对应方向的自动填充特性的
在垂直方向使用margin居中
1.writing-mode 改变文档流的方向
2.使用绝对定位元素格式化宽度和格式化高度 通过margin:auto 实现垂直水平居中
margin 无效情形
1.display 计算值 inline 的非替换元素的垂直 margin 是无效的
2.表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是无效的
3.margin 合并的时候，更改 margin 值可能是没有效果的
4.绝对定位元素非定位方位的 margin 值无效
5.定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位失效
6.鞭长莫及导致的 margin 无效
7.内联特性导致的 margin 无效