第一步：根底阐明。
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分隔，就是不产生重叠）。