最近做了个项目，居然在一个小小的css问题上折腾了很久很是纠结——外边距折叠的问题。今天难得清闲，就把这个问题研究了一下，才发现大有学问，所以写篇博文整理一下，以便更加牢记！

　　外边距折叠，指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。

　　触发条件：

1.  毗邻，没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系
2.  这些 margin 都处于普通流中，即非浮动元素，非定位元素

　　垂直方向外边距合并的计算

　　1) 参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</<