margin

margin重叠

同级元素之间

两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。
两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加

父子元素之间（父级和第一个或者最后一个子元素）

子元素设置水平竖直方向的margin值 其值实际上是子元素的边框距离父元素padding内侧的距离。
子元素设置竖直方向的margin值，当父元素没有设置padding值以及border值时，父元素的上方与子元素的上方完全重合在了一起，无法分开。导致父元素和子元素同时向下的情况。
解决方法：

• 给父元素添加padding-top值
• 给父元素添加border值
• 给父元素添加属性overflow:hidden
• 给父元素或者子元素声明浮动float
• 使父元素或子元素声明为绝对定位：position:absolute
• 给父元素添加属性 overflow:auto;

重叠计算规则

• 正正取大值
• 正负值相加
• 负负最负值（负值小的）

margin和百分比

普通元素的百分比margin：都是相对于父元素的宽度计算的。

margin无效情景

• inline水平元素的垂直margin无效（非替换元素，比如不是 img 元素 正常书写模式，不是writing-mode: vertical-*）
• display: table-cell的元素margin无效