CSS外边距合并
2017-09-03 本文已影响0人
zh_yang
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
发生外边距塌陷的三种基本情况:
-
相邻的兄弟姐妹元素垂直方向外边距合并
毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {
background: yellow;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
margin: 50px;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
</body>
</html>
测试01.png
但是后者清除浮动后则不会合并：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
margin: 50px;
float: left;
}
.d2 {
content: "";
display: both;
clear: both;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
</body>
</html>
测试02.png
-
块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {
background: yellow;
}
.d1,.ct {
width: 200px;
height: 100px;
background: blue;
margin-top: 50px;
}
.d2 {
width: 50px;
height: 50px;
background: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="ct">
<div class="d2">d2</div>
</div>
</body>
</html>
测试03.png
类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height 、min-height 、max-height 分隔时，就会发生下外边距合并 现象。
-
空块元素
如果存在一个空的块级元素，其 border、padding、inline content、height 、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
body {
background: yellow;
}
.d1,.d3 {
width: 300px;
height: 50px;
background: red;
}
.d2 {
margin-top: 50px;
margin-bottom: 50px;
}
</style>
<body>
<div class="d1">d1和d2相距50px</div>
<div class="d2"></div>
<div class="d3">d1和d2相距50px</div>
</body>
</html>
测试04.png
合并规则：
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，按文档流负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算，不能分步进行。
不让相邻元素外边距合并的方法：
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不毗邻。
例外的情况：
根元素的外边距不会参与折叠
不设置任何属性的空span和空div不影响任何布局，可以无视之。
