第一步：根底阐明。
margin 的意思很容易明确，就是外边距，用更艰深的话说，就是二个盒子之间间距的设置。
margin 有许多须要留神的中央，比方块级元素垂直相邻外边距会合并，行内元素实际上不占高低外边距，左右外边距也不会合并，浮动元素的外边距也不会合并。
一般元素的 margin 百分百是依照父级元素（正确的说应该是蕴含块，具体能够看这篇文章对于 CSS 中设置 overflow 属性的值为 hidden 的相干了解）的宽来计算的，而相对定位的元素的 margin 百分比是依照第一个定位元素（relative，absolute 和 fixed）的宽来计算的。
第二步：block 元素重叠。
block 元素（不思考 float 和 absolute）在垂直方向产生 margin 重叠（不思考 writing-mode 扭转书写形式）；margin 三种重叠：1. 相邻兄弟元素；2. 父亲元素和第一个或最初一个孩子元素；3. 空的 block 元素。
第三步：重叠条件。
父子元素重叠条件（margin-top）
- 父元素非块状格局上下文元素；
- 父元素和第一个子元素之间没有 inline 元素宰割；
- 父元素没有 border-top 或 padding-top 设置。
父子元素重叠条件（margin-bottom）
- 父元素非块状格局上下文元素；
- 父元素没有 border-bottom 或 padding-bottom 设置；
- 父元素和最初一个子元素之间没有 inline 元素宰割；
- 父元素没有 height,min-height 和 max-height 的限度。
空的 block 元素重叠
- 元素没有 border 或 padding 或 inline 设置；
- 没有 height 或者 min-height 设置。
第四步：有价值的细节。
重叠计算方法：正正取最大、负负取最小和正负相加。
在书写方向的垂直方向，margin:auto 会主动调配残余空间（残余空间的意思简略的能够了解为：在没有设置宽之前的长度去掉你设置的宽余下的那段间隔）。
相对定位元素的非定位方向 margin 有效（貌似是的，不过形容不精确，其实始终无效，只不过当初只能够影响本人，无奈扭转兄弟了，因而看起来生效了）。
最初一个题外话，margin-collapse 能够设置重叠形式（collapse 默认，重叠、discard 勾销 margin, 等于 margin:0 和 separate 分隔，就是不产生重叠）。