margin 的百分比值元素设置 margin 在垂直方向上无法改变元素自身的内部尺寸，往往需要父元素作为载体，此外，由于 margin 合并的存在，垂直方向往往需要双倍尺寸才能和 padding 表现一致
margin 合并块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。
从定义上，我们可以捕获两点重要的信息。
（1）块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。
（2）只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流，因此发生 margin 合并的就是垂直方向。
相邻兄弟元素
父级和第一个/最后一个子元素：
• 父元素设置为块状格式化上下文元素；
• 父元素设置 border-top 值；
• 父元素设置 padding-top 值；
• 父元素和第一个子元素之间添加内联元素进行分隔。
对于 margin-bottom 合并，可以进行如下操作（满足一个条件即可）：
• 父元素设置为块状格式化上下文元素；
• 父元素设置 border-bottom 值；
• 父元素设置 padding-bottom 值；
• 父元素和最后一个子元素之间添加内联元素进行分隔；
• 父元素设置 height、min-height 或 max-height。
空块级元素：
• 设置垂直方向的 border；
• 设置垂直方向的 padding；
• 里面添加内联元素（直接 Space 键空格是没用的）；
• 设置 height 或者 min-height。
margin 合并规则：
1.正正取大值
2.正负值相加
3.负负最负值
margin 合并意义
对于兄弟元素的 margin 合并其作用和 em 类似，都是让图文信息的排版更加舒服自然。
在页面中任何地方嵌套或直接放入任何裸<div>，都不会影响原来的块状布局。
自身 margin 合并的意义在于可以避免不小心遗落或者生成的空标签影响排版和布局。
margin：auto
有时候元素就算没有设置 width 或 height，也会自动填充。
有时候元素就算没有设置 width 或 height，也会自动填充对应的方位
margin:auto 的填充规则如下。
（1）如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
（2）如果两侧均是 auto，则平分剩余空间。
margin 无效情形解析
display 计算值 inline 的非替换元素的垂直 margin 是无效的
表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是无效的
margin 合并的时候，更改 margin 值可能是没有效果的
绝对定位元素非定位方位的 margin 值“无效”
定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“失效”。
鞭长莫及导致的 margin 无效。
内联特性导致的 margin 无效
margin 合并块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。
从定义上，我们可以捕获两点重要的信息。
（1）块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。
（2）只发生在垂直方向，需要注意的是，这种说法在不考虑 writing-mode 的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流，因此发生 margin 合并的就是垂直方向。
相邻兄弟元素
父级和第一个/最后一个子元素：
• 父元素设置为块状格式化上下文元素；
• 父元素设置 border-top 值；
• 父元素设置 padding-top 值；
• 父元素和第一个子元素之间添加内联元素进行分隔。
对于 margin-bottom 合并，可以进行如下操作（满足一个条件即可）：
• 父元素设置为块状格式化上下文元素；
• 父元素设置 border-bottom 值；
• 父元素设置 padding-bottom 值；
• 父元素和最后一个子元素之间添加内联元素进行分隔；
• 父元素设置 height、min-height 或 max-height。
空块级元素：
• 设置垂直方向的 border；
• 设置垂直方向的 padding；
• 里面添加内联元素（直接 Space 键空格是没用的）；
• 设置 height 或者 min-height。
margin 合并规则：
1.正正取大值
2.正负值相加
3.负负最负值
margin 合并意义
对于兄弟元素的 margin 合并其作用和 em 类似，都是让图文信息的排版更加舒服自然。
在页面中任何地方嵌套或直接放入任何裸<div>，都不会影响原来的块状布局。
自身 margin 合并的意义在于可以避免不小心遗落或者生成的空标签影响排版和布局。
margin：auto
有时候元素就算没有设置 width 或 height，也会自动填充。
有时候元素就算没有设置 width 或 height，也会自动填充对应的方位
margin:auto 的填充规则如下。
（1）如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
（2）如果两侧均是 auto，则平分剩余空间。
margin 无效情形解析
display 计算值 inline 的非替换元素的垂直 margin 是无效的
表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是无效的
margin 合并的时候，更改 margin 值可能是没有效果的
绝对定位元素非定位方位的 margin 值“无效”
定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“失效”。
鞭长莫及导致的 margin 无效。
内联特性导致的 margin 无效
