外边距合并
2016-10-31 本文已影响0人
黄露hl
1. 常见外边距合并的类型
（1）普通文档流里垂直相邻的兄弟块级元素边距合并。
（2）父容器的上边距与第一个子元素margin合并，下边距与最后一个子元素margin合并。
（3）空元素上下margin合并为。
2. 合并后margin的计算
-
正正margin合并为最大值，如图中box1和box2之间的间隙为box1和box2外边距的最大值40px，父容器的上外边距为box1的值40px，父容器下边距的值为box2的外边距20px.
.box{background:pink;}
.box1{border:1px solid blue;width: 100px;height: 100px; margin:40px;}
.box2{border:1px solid red;width: 100px;height: 100px; margin:20px;}
.box3{ border:1px solid; }
.clear:after{ content:''; clear:both; display:block;}<body> <div class="box clear"> <div class="box1">box1</div> <div class="box2">box2</div> </div> <div class="box3"> 我是box3</div> </body>
11-1.jpg
-
负负外边距合并为最负值，例如-20px和-10px合并时取-20px。如图box1的margin为-10px，box2的margin为-20px，box1和box2合并后margin为-20px。
.box{background:pink;}
.box1{border:10px solid blue;width: 100px;height: 100px; margin:-10px;}
.box2{border:10px solid red;width: 100px;height: 100px; margin:-20px;}
.box3{ border:1px solid; }
.clear:after{ content:''; clear:both; display:block;}
11-2.jpg
-
一正一负则相加。例如10px和-20px相加后为-10px。如图box1的上margin与父容器都为正，合并为10px；box1和box2一正一负合并为-10px；box2下margin与父容器合并为-10px。
.box{background:pink;margin:10px;}
.box1{border:10px solid blue;width: 100px;height: 100px;margin:10px;}
.box2{border:10px solid red;width: 100px;height: 100px; margin:-20px;}
.box3{ border:1px solid; }
.clear:after{ content:''; clear:both; display:block;}
11-3.jpg
-
空元素上下margin自动合并成一个外边距。box2上下margin合并到了一起，只有50px。
.box{background:pink;margin:10px;}
.box1{border:1px solid blue;margin:10px;}
.box2{margin:50px;}
.box3{ border:1px solid; }
11-4.jpg
3. 父子外边距合并的解决方法：
（1） 给父容器加上边框。
（2） 给父容器加上padding。
（3）触发父容器的BFC，触发方式有：
- 设置浮动
- position:absolute或fixed
- overflow不是visibility
- display：inline或inline-block或tablecell、table-caption
另外BFC容器还可以包含浮动元素，也就是说容器中的子元素都设置浮动时，容器的高度也不会塌陷。
如：.box{background:pink;
/* border: 1px solid transparent; */
padding:1px;}
效果如图：
边距2.jpg
４. 相邻兄弟元素外边距合并解决方法：
1. 浮动元素、绝对定位元素和inline-block不会产生外边距合并。
给box2添加display：inline-block后上下两个元素边距没有合并了。
边距3.jpg
2. 将这两个相邻块级元素中的一个放入一个容器中，并且给这个容器设置边框或者触发容器的BFC。
如图，把box1放入容器ct里面，ct设置了透明边框后，box1和box2的外边距没有合并了
边距4.jpg
