Collapsing margins

外边距折叠是指垂直方向上相邻的两个外边距被合并为一个外边距的现象。margins 所属的元素可以是相邻关系也可以是嵌套关系。折叠现象只发生在垂直方向上的 margin 之间，水平方向不会发生。“相邻”是指两个外边距之间没有任何非空内容，padding区域或border边框。关于外边距折叠问题，在 《CSS2.1 规范》 中有详细的说明：http://www.w3.org/TR/CSS21/box.html#collapsing-margins，该规范感觉较复杂，不容易理解，再加上不同的浏览器或者同一种浏览器的不同版本之间对外边距折叠的解释都可能有所差别，所以在使用外边距时最好设置 border/padding，这样就不会出现外边距折叠现象。另外负边距的使用常常让人迷惑，所以能不用的时候最好少用。