你真的了解的 margin 属性吗？
本文总结于 张鑫旭老师的 CSS 深入理解之 margin 课程，感谢张老师的辛苦付出！
作为前端狗的我们，每天都要和网页打交道。当 UI 将设计稿发给你时，CSS 的知识便显得尤为重要。而 CSS 这一标记性的语言，却时常让我很头疼：毫无逻辑性，并充满了各种坑爹的潜规则 ，以至于每次做项目时，大部分时间精力都浪费在了调整布局与样式上，详情可点击知乎上的为什么 CSS 这么难学？问题，道出了我的心声 :(
但谁叫我们是吃这碗饭的呢，不管怎样，有困难必须迎面解决，学好 CSS ，向张老师看齐！
margin 算是性格刚烈的属性了，下面，我将从各个方面讲解 margin 的可怕之处。
通常一个元素的尺寸可分为：可视尺寸 与 占据尺寸
可视尺寸 - clientWidth (border - padding - size)
占据尺寸 - outerWidth (border - margin)
margin 又是怎样影响这两个尺寸的呢？
首先，两个尺寸都需满足一定的条件。
适用于 没有设定 width/height 的块级元素 (宽高设死了，怎么会影响呢？) 其中不包括 float absolute fixed 元素 ，inline 水平 ，table-cell 元素
只适用于水平方向尺寸（margin-left/margin-right）
适用于 block/inline-block 水平元素
适用于 任何方向
与 width/height 值无关
inline 元素只影响水平方向 (后面会提到)
margin 影响元素的可视水平尺寸
See the Pen margin 的可视尺寸 by Simon Ma (@Tomotoes) on CodePen.
margin 影响占据尺寸 ，这个可以说是 margin 的本命技能了，就不举例了。
通常而言，margin 的单位中，百分比单位最容易让人头晕。
普通元素的百分比 margin 都是相对于 容器的宽度 计算的
1 2 3 4 5 6 7 8 9 10 11 12 13 | COPY#parent {
margin: 20px 400px;
width: 100px;
height: 200px;
}
#child {
/* 等价于 margin: 5% * 父元素的宽度 10% * 父元素的宽度; */
margin: 5% 10%;
/* 父元素的宽度 * 50% */
width: 50%;
/* 父元素的高度 * 50% */
height: 50%;
} |
1 2 3 | COPY<div id="parent"> <div id="child"></div> </div> |
绝对定位的百分比 margin 是相对于 第一个具有定位属性的祖先元素的宽度 计算的(relative/absolute/fixed)
1 2 3 4 5 6 7 8 9 10 | COPY#parent {
width: 100px;
}
#child {
/* 注意子元素已增加绝对定位，则百分比按照定位属性的祖先元素的宽度计算，
本例中是浏览器视口 */
position: absolute;
/* 等价于 margin: 5% * 父元素的宽度 10% * 父元素的宽度; */
margin: 5% 10%;
} |
1 2 3 | COPY<div id="parent"> <div id="child"></div> </div> |
重叠可谓是 margin 中的最重要的潜规则了。
相邻的兄弟元素
父级和第一个/最后一个子元素
空的块级元素（自己和自己）
块级元素 （不包括 float 和 absolute 元素）
不考虑 writing-mode，只发生在垂直方向 （margin-top/margin-bottom）
父子 重叠条件
margin-top 重叠
margin-bottom 重叠
父元素 非格式化上下文元素 没有设置 overflow:hidden
父元素没有 border-bottom 设置
父元素没有 padding-bottom 设置
父元素和第一个子元素之间没有 inline 元素分割
父元素没有 height ，min-height，max-height 限制
父元素 非格式化上下文元素 没有设置 overflow:hidden
父元素没有 border-top 设置
父元素没有 padding-top 设置
父元素和第一个子元素之间没有 inline 元素分割
空的块级元素 margin 重叠条件
元素没有 border 设置
元素没有 padding 设置
里面没有 inline 元素
没有 height，或者 min-height
正正取大值
1 2 3 4 5 6 | COPY#top {
margin-top: 30px;
}
#bottom {
margin-bottom: 20px;
} |
1 2 3 | COPY<div id="bottom"></div> <div id="top"></div> 两个元素垂直距离为 : #top 元素的 margin-top 值 |
正负值相加
1 2 3 4 5 6 | COPY#top {
margin-top: -30px;
}
#bottom {
margin-bottom: 20px;
} |
1 2 3 | COPY<div id="bottom"></div> <div id="top"></div> 两个元素垂直距离为: #top 元素的 margin-top 值 加上 #bottom 元素的 margin-bottom 值 |
负负最负值
1 2 3 4 5 6 | COPY#top {
margin-top: -30px;
}
#bottom {
margin-bottom: -20px;
} |
1 2 3 | COPY<div id="bottom"></div> <div id="top"></div> 两个元素垂直距离为 : #top 元素的 margin-top 值 |
父级和第一个/最后一个子元素 发生重叠 给子元素设置垂直方向的 margin ，等同于 给父元素设置相同的垂直方向的 margin 属性， 也就是说 父子元素发生 margin 重叠时， 它们俩共用一个 margin 属性
连续段落或列表之类，如果没有 margin 重叠，排版会不自然。
页面中任何地方，嵌套或直接放入任何空的 div，都不会影响原来的布局。
遗落空的任意多个 p 元素，不会影响原来的阅读排版。
当你使用 margin auto 时，就应该联想到一个词 ：填充
一个没有设置宽高的块级元素，会自动填充宽度 如果 一侧是定值，一侧是 auto，则 auto 为剩余空间的大小 如果两侧均是 auto，则平分 剩余空间
示例如下：
1 2 3 4 5 6 7 8 9 | COPY<style>
#demo {
width: 500px;
margin-right: 100px;
/* margin-left: 100vw - margin-right - width*/
margin-left: auto;
}
</style>
<div id="demo"></div> |
以上，我们可得当一个块级元素设置了 margin: 0 auto 可以实现水平居中，
而为什么 margin:auto 0 不会垂直居中？
答：一个块级元素会自动填充可用的水平尺寸，但不会填充垂直尺寸，是因为其根本没有任何可用的垂直空间。也就是说 margin: 0 auto , 总是有尺寸可以来填充的！ 而 margin: auto 0 是没有任何尺寸的可以来填充的。
当子元素的宽度大于父元素的宽度 ，是无法通过 margin: 0 auto 实现居中的 因为，这个时候已经没有任何空间可以填充了，当宽度超出父元素时，margin 已经为负值了。
writing-mode 与垂直居中
1 2 3 4 5 6 | COPY.father {
writing-mode: vertical-lr; /* 更改流的方向为 垂直方向 */
}
.son {
margin: auto;
} |
1 2 3 | COPY<div class="father"> <div class="son"></div> </div> |
绝对定位元素
1 2 3 4 5 6 7 8 9 10 11 | COPY.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
} |
1 2 3 | COPY<div class="parent"> <div class="child"></div> </div> |
inline 水平元素的垂直 margin 无效（margin-top/margin-bottom）
margin 重叠发生
绝对定位元素非定位方位的 margin 值 “无效” 因为 绝对定位元素 脱离了文档流，与相邻元素没有关系，所以它不可能像普通元素一样，设置 margin，推走其他元素
margin 鞭长莫及 因为 有某些元素破坏了 文档流，设置了 float absolute，造成了假象，margin 不会根据 这些破坏元素作为标准
display:table-cell/display:table-row 等声明的 margin 无效！某些替换元素除外，根据各个浏览器的实现方式作为区分。比如，给 button 元素声明 display:table-cell，但在 chrome 中,button 的 display 属性是 inline-block 。
内联特性导致 margin 失效 margin-top: 负无穷， 但是，小到 1em 便无效了。 因为它是内联元素，默认是基线对齐，x 字母下边缘对齐，margin 值再大，也不会起作用。 示例如下：
See the Pen margin 负无穷情景解析 by Simon Ma (@Tomotoes) on CodePen.
margin-start
正常流向，margin-start 等同于 margin-left，两者重叠不相加
如果水平流向是从右向左，margin-start 等同于 margin-right
在垂直流下 ( writing-mode:vertical-*; ) margin-start 等同于 margin-top
margin-end 与 margin-start 相对
margin-before 默认情况等同于 margin-top
margin-after 默认情况等同于 margin-bottom
margin-collapse
margin-collapse:collapse;
(默认值) 发生重叠
margin-collapse:discard;
取消重叠，margin 重叠部分为 0 ，没有 margin
margin-collapse:separate;
不发生重叠，margin 重叠部分为 margin-top + margin-bottom
