外边距合并的出现以及解决方式

1. 什么是外边距

如两个div，第一个div的margin-bottom:30px，第二个div的margin-top:10px，页面表现结果是30px，而不是我们理想中的30px+10px=40px，结果选择的是两者之间最大的margin，这种机制就是“外边距合并”

2. 外边距出现地方

（1）相邻的元素

（2）父子级之间

3. 外边距合并需要注意以下几个方面

（1）外边距合并只出现在块级元素

（2）行内块级元素不会产生外边距合并

（3）浮动元素不会和相邻的元素产生外边距合并

（4）根元素之间不会产生外边距合并（例如html与body之间）

（5）父级元素设置属性overflow的值不为visible的块级元素不会与它的子元素产生外边距合并

4. 例子

<div class="div-children1">div1</div>
<div class="div-children2">div2</div>

.div-children1{
   margin-bottom: 20px;
   width: 100px;
   height: 50px;
   border: 1px solid #000;
}
.div-children2{
   margin-top: 10px;
   width: 100px;
   height: 50px;
   border: 1px solid #000;
  }

 

5. 父元素与子元素外边距合并的的解决方式

 

（1）父级元素设置overflow属性，值可以取scroll、auto、hidden，不能取visible

（2）使用float属性（父元素或者子元素设置均可以解决外边距合并）

（3）使用position:absolute

（4）设置display:inline-block（但要注意对相邻元素的影响）

（5）用子元素的margin通过父元素的padding代替

（6）子元素使用透明边框，如border:20px solid transparent

（7）给父元素设置border

6. 子元素与父元素、相邻元素外边距合并的解决方式

（1）使用float属性

（2）使用position:absolute

（3）设置display:inline-block