css margin

1. margin值只对内联元素(inline-block)或块状元素(block)有效,对于 inline元素是无效的
2. margin collapse 折叠的情况

• 垂直相邻的 margin 才有可能折叠，水平 margin 永远不折叠
• 根元素（即 html 元素）的 margin 永远不折叠
• 如果一个元素，它的 top margin 和 bottom margin 是相邻的，并且有清除浮动后的空隙（clearance），这个元素的 margin 可以跟兄弟元素的 margin 折叠，但是折叠后的 margin 不能跟父元素的 bottom margin 折叠。

3. 折叠后的距离计算:

• 如果 margin 都是正数，则取他们当中的最大值
• 如果 margin 中有正有负，则取最大的正数加上最小的负数（如最大的 margin 是 20px，最小的 margin 是 -20px，则他们计算后的值是 0）
• 如果 margin 中都是负数，则取他们当中的最小值

几种特殊情况

1.浮动、定位元素的 margin 不会和其他任何元素的 margin 发生重叠，包括它的子元素。

这是因为浮动元素脱离了正常流，所以它和其他相邻元素就不处与同一个流中，自然不相邻；又因为浮动元素的内容盒会形成一个新的 BFC，所以浮动元素跟子元素不处与同一个 BFC 中，因此它们的 margin 也不能折叠。定位元素同理可得

2.inline-block 的元素不会和其他元素的 margin 发生折叠，包括它的子元素

因为 margin 折叠只会发生在块级元素上，因此 inline-block 元素的 margin 不会和兄弟元素折叠，又因为 inline-block 的内容盒会形成一个新的 BFC，所以 inline-block 元素本身也不会和子元素的 margin 发生折叠

如图： #a, #b 均为 inline-block, 他们之间没有发生折叠

inline-block.png

coding.net具体