【CSS】边距塌陷margin collapse

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。

翻译于: why do only some CSS margins collapse?的回答