css外边距叠加

2017-08-20 本文已影响0人 yongningfu

css外边距叠加条件:

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

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

叠加的情况有三种：

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

情况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外边距叠加