记得刚开始布局的时候就经常遇到这个问题，两个元素设置了上下边距却没有达到预想的效果，后来才知道有个概念叫`外边距折叠，这篇文章整理一下折叠的原因和方式。
为什么要设计出外边距折叠？
只有垂直Margin会发生折叠，而水平Margin则不会。这是为了排版的需要，因为在多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。
有哪些折叠的情况？
- 上方元素的下外边距会与下方元素的上外边距相折叠，值取大的margin
- 一个元素嵌套在另外一个元素里的情况下, 并且外面的元素没有边框和内边距
- 一个空元素，只有外边距没有边框或者内边距，此时上下边距接触也会折叠
- 折叠后的外边距遇到其他的外边距还会继续折叠
解决方案
- 只有文档流中的块级元素会发生Margin折叠 因此可通过将元素从文档流中去除，或者display设为inline-block的方式，防止其与兄弟节点发生margin折叠。
- 创建BFC的元素，不会与子元素发生margin折叠 因此可通过触发元素的BFC，来防止它与自己的子元素发生Margin折叠
- 当元素之间产生间隙时，可能不会发生margin折叠 因此可通过padding,border来制造间隙，以防止margin折叠
