边距不会推动另一个边距。

Question

6

我有一系列像这样的元素：

<h1>...</h1>
<p>.......</p>
<h1>...</h1>
<p>.......</p>
<!-- etc. -->

我在h1上设置了5像素的顶部边距，在p上设置了10像素的底部边距。但是最终的边距只有10像素。如果我将底部边距增加到50像素，将顶部边距增加到40像素，则总边距仍然是50像素。

总边距始终取决于最大的边距。为什么？如何解决这个问题？

- C. E.

所有这些元素都是 display: block 吗？ - Pekka

这里有一个jsFiddle示例，使用背景颜色来突出边缘。请注意，“标准化CSS”已选中，在h1和p上删除默认的边距和填充。 - Rory O'Kane

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yi Jiang · Accepted Answer

你看到的行为称为margin collapse，这是一种预期的行为。简单来说，当两个块级元素的外边距接触时，它们就会发生折叠，只有最大的外边距会被保留显示。

相邻元素之间的外边距会折叠。简单地说，这意味着在正常文档流中，对于相邻的垂直块级元素，只有具有最大外边距值的元素的外边距将被保留显示，而具有较小外边距值的元素的外边距将被折叠为零。

针对此问题，没有一种解决方案适用于所有情况 - 你可以尝试使用padding代替外边距，或者通过考虑此问题增加外边距来解决。