深入解读JavaScript

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

2019-08-18  本文已影响1人  悟C

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

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

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

有哪些折叠的情况?

解决方案

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

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

上一篇 下一篇

猜你喜欢

热点阅读