CSS margin的纵向特性

第一篇前端技术文章，介绍关于CSS中常用属性margin(外边距）在垂直方向上的一些特性。

一：垂直方向的margin会重叠

纵向margin会有重叠的特性，如下图

DOM1的margin-bottom和DOM2的margin-top不会在垂直方向上产生两者相加的空白间距，而是呈现较大的那个纵向margin值。

*由于普通块级元素都是独占一行显示，margin-left和margin-right无法检测是否也有重叠的特性。但换个角度让两个块元素float之后，可见横向margin并无此特性，而是叠加产生空白。

二：元素的纵向margin会向外传递

元素的纵向margin向外传递需要满足3个条件

当前元素没有位于其代码位置之前的同样显示特性的兄弟元素

在遍历路径上没有元素设置了垂直边框（border）或者垂直内边距（padding）

遍历元素不是body元素

所谓的向外传递，就是指本来作用在DOM元素上的垂直margin，会作用到DOM元素的父元素或者祖先元素，我们先来看个例子

例子1 往父元素传递

对应代码结构

...

...

上图中，绿色的DOM2设置了margin-top:30px，其父元素DOM1没有设置纵向边框和内边距，因此margin-top满足向外传递的条件，传递给DOM1。由于DOM1的父元素是body，不满足传递条件3，所以margin-top最终在DOM1上起作用。DOM1的顶部外边距产生了30px的空白。

例子2 往祖先元素传递

对应代码结构

...

...

上图中，绿色DOM4的父元素DOM3没有设置纵向border/padding，DOM3的父元素DOM1也没有设置这两项，所以DOM4的margin-top会传递到DOM1,30px的空白外边距最终显示在DOM1上。

例子3，设置纵向border打破传递规则

对应代码结构 略

如上图，DOM4的父元素DOM3设置了1px的上边框，这样使得DOM4设置的margin-top不满足条件2而无法向上传递，所以外边距空白这回只能乖乖的作用在DOM4元素上了。当然不只纵向border会制约传递，纵向padding同样也会，读者可自行测试。

例子4，有位置在前的兄弟元素同样会打破传递规则

对应代码结构

...

...

如上图，DOM4的父元素DOM3同样没有设置纵向border / padding，所以DOM4的margin-top可以传递到DOM3，然后想继续往外传递的时候，却碰到DOM3有个兄弟元素DOM2，并且在代码书写顺序上在DOM3之前，此时受制于条件1，纵向margin的传递到此结束。所以最终的上外边距的空白会显示在DOM3上。

*另外如上图，如果此时DOM3本身设置了纵向margin，DOM2也设置了纵向margin，按一开始说的叠加原则，看哪个纵向margin设置的大，就呈现那个margin空白。

以下规整了纵向margin传递的考虑流程供参考

s1判断当前DOM是否有并级上层元素

有e1没有s2

s2遍历到父元素，判定父元素是否是body元素

是e2否s3

s3判断当前DOM是否定义了border-top/padding-top大于0的值

是e2否s4

s4返回s1继续判定

e1渲染margin-top于当前DOM

e2渲染margin-top于上一次的DOM

以上虽然都以margin-top举例，相信看官到这对于margin-bottom应该就不言自明了。