HTML
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
CSS
span {
display: block;
height: 100px;
margin: 5px 0;
}
-
元素的顶部和底部边距将与其兄弟元素融合(或者如果没有prev/next兄弟元素存在,则与他们的父元素融合),而不是将每个边距显示为单独的间距。(译者: 兄弟元素上下边距融合规则: 哪个大就取哪个;父子元素融合规则: 子元素的边距转移给父元素)
-
假如没有边距塌陷,上面的标签将表现成这样
+div-----+
| margin |
|+span--+|
||A ||
|+------+|
| margin |
| margin |
|+span--+|
||B ||
|+------+|
| margin |
| margin |
|+span--+|
||C ||
|+------+|
| margin |
+--------+
- 当边距塌陷时,标签将表现为这样:
margin
+div-----+
|+span--+|
||A ||
|+------+|
| margin |
|+span--+|
||B ||
|+------+|
| margin |
|+span--+|
||C ||
|+------+|
+--------+
margin
这意味着div的高度包括每一个元素的高度和元素之间的边距。
在本例中高度是: 100 + 5 + 100 + 5 + 100 = 310。