margin合并
2017-03-23 本文已影响27人
辉夜乀
- 两个相邻元素如果处于同一个BFC中，那么它们就会发生margin合并。
代码举例
<body>
<div class="box">
<div class="box-1">
<div class="box-2"></div>
</div>
</div>
</body>
.box{
border: 1px solid;
padding: 0;
}
.box-1{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
}
.box-2{
width: 100px;
height: 100px;
background: yellow;
margin: 50px auto;
}
Paste_Image.png
红色父元素和黄色子元素的上下margin都是50px，
它们相邻的时候，上下margin就发生了合并，
- 合并方式为：取较大的那个margin值。
代码举例
<body>
<div class="box">
<div class="box-1">
<div class="box-2"></div>
</div>
</div>
</body>
.box{
border: 1px solid;
padding: 0;
}
.box-1{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
}
.box-2{
width: 100px;
height: 100px;
background: yellow;
margin: 100px auto;
}
Paste_Image.png
红色父元素上下margin为50px，黄色子元素的上下margin为100px，它们相邻的时候，上下margin就发生了合并，且取值为较大的100px。
- 取消外边距合并的方法
将父子元素设置成不同的BFC，常用的是设置display: inline-block;
代码举例
<body>
<div class="box">
<div class="box-1">
<div class="box-2"></div>
</div>
</div>
</body>
.box{
border: 1px solid;
padding: 0;
}
.box-1{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
display:inline-block;
}
.box-2{
width: 100px;
height: 100px;
background: yellow;
margin: 50px auto;
}
Paste_Image.png
对父元素设置display: inline-block;后，父子元素不在同一个BFC中，他们的margin就不会合并了。
