css collapsing margins问题

概念

    Collapsing margin，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，即外边距折叠。其中所说的 margin 毗邻，可以归结为以下两点：

1. 这两个或多个外边距没有被非空内容、padding、border或clear分隔开。

2. 这些margin都处于标准流(in-flow，非浮动元素，非定位元素)中。

计算

    如果margin合并后该如何计算呢，遵循下面三个准则

1. 如果相邻的两个或者多个元素的margin都为正值，那么合并后的margin值为其中的最大值
2. 如果有正有负，取正值中最大的和负值中绝对值最大的两个margin值相加
3. 如果都是负值，取绝对值最大的值