CSS外边距合并(叠加)

几种CSS外边距合并的情况

  1. 一个元素的下边距和一个元素的上边距重合

    margin1

  2. 一个元素包含着另一个元素

    前提:中间没有内边距和边框分隔开

    margin2

  3. 空元素的上边距和下边距

    前提:是个空元素,没有内容,没有内边距,没有边框

    margin3

为什么会合并?

总的来说,从两个垂直外边距合并时,将形成一个外边距,外边距的值等于外边距较大者。

适用对象:只有普通文档流的,行内、浮动、绝对定位不会产生合并。

它也有它的意思所在

其实这不是一个bug,它可以让段落的边距和边框高度一致。

麻凯倩

微信:makaiqian