CSS外边距合并

2019-01-10 本文已影响3人 YYPL

关于边距合并其实不难理解，但还是写一篇博客记录一下。

边距合并的场景

相邻元素合并
父子合并
自己合并

实例剖析

相邻元素合并

/* css */
   /* 相邻元素边距合并1 */
   body {
     margin: 0;
   }
   .first {
     margin-left: 60px;
     height: 100px;
     width: 200px;
     background-color: red;
     margin-bottom: 30px;
   }
   .second {
 /*  margin-top: 60px; */   
     height: 100px;
     width: 200px;
     background-color: green;
   }
<!-- html -->
 <div class="first">相邻元素边距合并1</div>
 <div class="second">相邻元素边距合并2</div>

Snip20190110_15.png

为了防止干扰，先设置body的margin为0,这时候可以看到div.first的下边距就是设置好的下margin，div.second没有设置上margin,两者之间的边距就是30px；
把div.second已经注释的边距代码还原

.second {
      height: 100px;
       margin-top: 60px; 
      width: 200px;
      background-color: green;
    }

Snip20190110_19.png

以我们之前前设置的第一个div的margin-left: 60px;做参照可以明显的看出，合并之后的边距是60px(即为第二个div的边距)，而不是我们认为的90px,是不是很艹蛋

这就是相邻元素合并，最后合并的值是两者中较大的那个(margin的值不是负数)

相邻元素合并代码

父子合并

    /* 父子元素合并css */
.father {
      width: 200px;
      background-color: red;     
     }
    .son {
      background-color: green;    
      height: 100px;
      width: 200px;
    }
  <!-- html -->
  <div class="father">
    <div class="son">
父子合并
    </div>
  </div>

Snip20190110_20.png
这时给后代元素加一个margin-top: 50px;给父元素加一个margin-top: 10px为了便于观察给子元素加一个 opacity: .4;
合并之后的边距还是50px

Snip20190110_24.png

父元素合并，取父子中margin较大的那个值

父子元素合并代码

自己合并

  /* 自己合并css */
.self1 {
       background-color: red; 
    }
    .self3 {
       background-color: green; 
    }
  <!-- html -->
  <div class="self1">自己合并1</div>
  <div class="self2"></div>
  <div class="self3">自己合并3</div>