美文网首页
css外边距叠加

css外边距叠加

作者: yongningfu | 来源:发表于2017-08-20 17:59 被阅读0次

css外边距叠加条件:

必须是普通文档流中块框垂直外边距相互接触才会发生外边距叠加,
注意:外边距必须相互接触才能叠加

叠加理由:处于块级格式化上下文中, 垂直接触的外边距会叠加

叠加的情况有三种:

  1. 同级元素直接外边距叠加
  2. 父和子之间外边距叠加
  3. 自己和自己之间外边距叠加

情况1 同级元素直接外边距叠加

   <div class="p1"></div>
   <div class="p2"></div>
.p1 {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 30px;
}

.p2 {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 30px;
}

结果为

Paste_Image.png

两个元素直接为 30px, 即发生了外边距的重叠
如何解决呢?

之前说过,在BFC中 ,垂直方向上,接触的外边距会发生外边距叠加,一种简单的思路就是,不然两个外边距接触,即

    <div class="p1"></div>
    <hr/>
    <div class="p2"></div>
Paste_Image.png

发现外边距不叠加了,另外一种方法是,利用BFC, 让两个元素不在同一个BFC里面

    <div class="p1"></div>
    <div class="bfc">
        <div class="p2"></div>
    </div>
.p1 {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 30px;
}

.p2 {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 30px;
}

.bfc {
    overflow: hidden;
}
Paste_Image.png

简单的说就是,让P2 处于 div.bfc这个BFC上下文里面,从而与 P1不在一起

情况2 父和子之间外边距叠加

    <div class="p"></div>
    <div class="parent">
        <div class="child"></div>
    </div>
.p {
    width: 100px;
    height: 100px;
    background: red;
}
.parent {
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 20px;
}

.child {
    width: 100px;
    height: 100px;
    background: yellow;
    margin-top: 60px;
}

Paste_Image.png

发现,p 和 parent之间的外边距为60, 这是为啥,因为parent 和 child的外边距 发生了接触,所以他们叠加了, 解决方法也很简单,让parent和child的外边距不接触就行了,于是给parent加一个外边距

.parent {
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 20px;
    border-top: 1px solid green;
}

Paste_Image.png

发现加了外边距后, child的margin部分也成为了 parent的一部分,这里好涉及到另外一个点 究竟元素真正的边框是啥,其实是外边距,只是外边距之间的叠加, 而且外边距不显示背景色让我们误以为 外边距不算是不算是元素的一部分, 但实际上,外边距才是元素的真正边距

情况3 自己和自己外边距叠加

如果一个元素,margin-bottom 和 marginp-top之间没有内容,相互接触的话,他们也会叠加

    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
.top, .bottom {
    width: 100px;
    height: 100px;
    background: red;
}

.bottom {
    background: yellow;
}

.middle {
    margin-top: 30px;
    margin-bottom: 30px;
}
Paste_Image.png

发现上 和 下两个元素只有30px边距,说明,middle自己的 margin-top和marign-bottom发生了叠加,如何解决呢, 让他们不接触即可

.middle {
    margin-top: 30px;
    margin-bottom: 30px;
    border-top: 1px solid transparent;
}
Paste_Image.png

相关文章

  • css外边距叠加

    css外边距叠加条件: 必须是普通文档流中的块框的垂直外边距相互接触才会发生外边距叠加,注意:外边距必须相互接触才...

  • CSS 外边距叠加详解

    CSS 外边距叠加有以下几种情形: 相邻(兄弟)元素的上下边距叠加 包含(父子)元素的上下边距叠加 元素自身的上下...

  • 第3章《精通css》

    3.1.2外边距叠加 只有普通文档流中块框的垂直外边距才会发生外边距叠加,行内框、浮动框或绝对定位框之间的外边距不...

  • Margin叠加外边距叠加margin值为负数

    当两个垂直外边距相遇时,这两个外边距会合并为一个外边距,叠加之后的外边距高度等于发生叠加之前的两个外边距的最大值。...

  • CSS 外边距- 外边距合并

    1:CSS margin 属性 margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。 margin...

  • CSS: margin叠加几种情况

    margin叠加的意思是:当两个或者更多的垂直外边距相遇时,它们将形成一个外边距,这个外边距的高度等于两个发生叠加...

  • CSS外边距

    Margin margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的margin可以单...

  • css外边距

    1、什么是外边距?标签和标签之间的距离就是外边距 2、格式2.1非连写margin-topmargin-right...

  • CSS 外边距

  • CSS盒子模型、定位、浮动

    CSS盒子模型概述 CSS内边距 CSS边框: CSS外边距 CSS定位: CSS浮动:

网友评论

      本文标题:css外边距叠加

      本文链接:https://www.haomeiwen.com/subject/rlmfdxtx.html