CSS中外边距折叠的方式、原因、解决方案

记得刚开始布局的时候就经常遇到这个问题，两个元素设置了上下边距却没有达到预想的效果，后来才知道有个概念叫`外边距折叠，这篇文章整理一下折叠的原因和方式。

为什么要设计出外边距折叠？

只有垂直Margin会发生折叠，而水平Margin则不会。这是为了排版的需要，因为在多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。

有哪些折叠的情况？

• 上方元素的下外边距会与下方元素的上外边距相折叠，值取大的margin
• 一个元素嵌套在另外一个元素里的情况下, 并且外面的元素没有边框和内边距
• 一个空元素，只有外边距没有边框或者内边距，此时上下边距接触也会折叠
• 折叠后的外边距遇到其他的外边距还会继续折叠

解决方案

1. 只有文档流中的块级元素会发生Margin折叠 因此可通过将元素从文档流中去除，或者display设为inline-block的方式，防止其与兄弟节点发生margin折叠。
2. 创建BFC的元素，不会与子元素发生margin折叠 因此可通过触发元素的BFC，来防止它与自己的子元素发生Margin折叠
3. 当元素之间产生间隙时，可能不会发生margin折叠 因此可通过padding,border来制造间隙，以防止margin折叠

参考:
Margin折叠，站在设计者的角度思考