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