「CSS」Margin Collapsing

  • A+
所属分类:html教程
摘要

「CSS」Margin Collapsing

外边距合并在排版上带来非常大的便利,但是人们对其不甚了解,导致使用外边距的时候总是出现繁多问题,今日写下一片文章,总结一下外边距合并。

三种基本的外边距合并

只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。外边距合并都是基于以下三种基本的外边距合并。

1. 相邻的同胞元素

我们考虑两个连续的 div,他们的上下左右的边距都是 50px。此时,第一个区域的下外边距第二个区域的上外边距 合并,故他们的间隔是 50px。

 
 

2. 父元素与子元素

  • 第一个子元素的上外边距和父元素的上外边距会进行合并

  • 最后一个子元素的下外边距和父元素的下外边距会进行合并

合并的视觉效果就是这些合并的外边距 表现为父元素的外边距

我们使用一个有颜色区域包含另外一个不同颜色的区域。里面的区域所有的外边距设为50px。

     
  
 

我们可以看到, margin-box 的左边和右边都展示为 #cccdd1, 而由于上边和下边的外边距和父元素的合并了,并表示为父元素的外边距,故颜色为父元素的父元素的背景色(若又发生合并,递推即可)。

细心的读者会发现,我并没有设置父元素的 margin,何来合并一说?
这是因为当 margin 为 0 的时候也会发生合并。

3. 空元素

它自己的上外边距和下外边距合并了。°(°?Д?°) °

阻止外边距合并

第二种情况不合并

  • 设置 overflow: hidden;(不为 visible 都可)。

  • 由于 margin 需要直接接触才能够合并,根据盒子模型,我们可以设置父元素的 边框内边距,或者使用某些元素将第一个元素和父元素隔开(那就不是第一个元素了)。

  • 三种情况都不合并

  • 只有在静态流的元素才会发生外边距合并,故设置 float, position: absolute; 都可以使得外边距在何种情况都不合并。

  • inline-block 是个例外,它既没有脱离文档流,但是它的所有的外边距都不会合并。

  • DEMO

    听说技术文章和 DEMO 更配噢~
    git clone https://github.com/JasonKid/fezone.git 搜索 Margin Collapsing

    记得点赞... (??□′)?? ┴─┴

    除非注明,否则均为@蒲公英博客原创文章,转载必须以链接形式标明本文链接

    本文链接:https://www.aipgy.com/323203.html

    • 我的微信
    • 这是我的微信扫一扫
    • weinxin
    • 我的微信公众号
    • 我的微信公众号扫一扫
    • weinxin
    avatar

    发表评论

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: