详解css外边距折叠(margin collapsing)

日期:2021-03-01 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

前文

这是的1个經典的老难题,由于以前恰好有读者盆友问到,顺带梳理1下。

从1个简易事例说起

先看1个简易示例:

<style>
    .slide1 div {
      margin:10px 0;
    }
  </style>
 <div class="slide1">
    <h3>第1种外边距折叠:弟兄元素</h3>
    <p>文字左右间隔10px</p>
    <p>文字左右间隔10px</p>
  </div>

看这个事例中的两个p标识,依据款式界定:第1个pmargin-bottom和第2个pmargin-top 全是10px,那具体间距应当等于20px才对,可是用访问器查询1下能够发现,最后的边距是10px。 这个事例便是外边距折叠:块级元素的上外边距和下外边距有时汇合并(或折叠)为1个外边距。

归类状况

外边距折叠有3种基础状况:

  1. 邻近元素
  2. 父元素和第1个子元素(或最终1个子元素,等下记得回过头思索下这里为啥是第1个或最终1个)
  3. 空的块级元素

先不急着记忆力,最先,前文的事例中便是第1种状况--邻近的两个元素之间产生的外边距折叠。

第2种和第3种状况以下:


<style>
    .father {
      background-color: green;

    }
    .child {
      margin-top: 50px;
      background-color: red;
      height: 300px;
    }
    
      .slide3 {
      margin: 10px 0;
    }
  </style>
  <h3>第2种外边距折叠:父元素和首个子元素</h3>
  <div class="slide2 father">
    <!-- 父元素是翠绿色 -->
    <div class="slide2 child">
      <!-- 子元素是鲜红色 -->
    </div>
  </div>
  <h3>第3种外边距折叠:空的块级元素</h3>
  <div class="slide3"></div>

她们的图象也各自如图:

状况2: 子元素的外边距会“迁移”到父元素的外面

状况3:该元素的左右外边距会折叠

好了,到这里大家何不看来看这几种状况的相互点(提议画1下她们的盒实体模型,我懒就不画了-_-),能够发现产生外边距折叠的相互缘故:margin之间立即触碰,沒有隔绝。

怎样了解立即触碰?很简易:

  • 第1个事例中,两个<p>标识的竖直方位margin是立即触碰的;
  • 第2个事例中,因为父元素的padding,border都为0,因此margin和它的子元素也是立即触碰的。(这个事例画出盒实体模型就很好了解)
  • 第3个事例中,空元素自身的左右边距也是立即触碰的(padding,border也是0)

各种各样状况下折叠的結果

折叠后的边距怎样测算,这个能够简易认证下:

  • 假如两个外边距全是恰逢,折叠后的边距取较大的1个
  • 假如两个边距1正1负,折叠后的边距为边距之和
  • 假如两个边距都为负数,折叠后面距为较小的边距之和

怎样避免外边距折叠

前文说到,产生外边距折叠的缘故是,外边距立即触碰,因而避免折叠的方法便是,隔绝这个立即触碰,组成的方式包含:

  • 嵌套循环状况要是border padding 非0,或有inline元素分隔,例如父元素里加1写作字还可以(能够立即在状况2尝试)
  • 任何依靠bfc产生隔绝的方法,如波动,display:table等(BFC不熟习的同学先查查,我后边补上)

小结

还得填补1下,前面探讨的是基础状况,在基础状况下还能够开展组成,例如好几个邻近元素之间;多层子孙后代元素嵌套循环这些,弄搞清楚基础基本原理,别的状况要是写写小的demo认证下就很好了解了。随后是国际惯例:假如內容有不正确的地区欢迎指出(感觉看着没理解不舒适想调侃也彻底没难题);

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

原文详细地址:https://segmentfault.com/a/42993