保证金不会压低另一个保证金

Question

我有一系列这样的元素：

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

h1 的上边距为 5 像素，p 的下边距为 10 像素。但产生的边距只有 10px。而如果我将下边距增加到 50px，上边距增加到 40px，总边距只有 50px。

总边距始终是最大边距。为什么？我该如何解决？

Answer 1

您看到的行为称为边距崩溃，这是一种预期行为。基本上，当两个块级元素的边距接触时，它们就会塌陷，只会出现最大的一个。

相邻之间的边距折叠 元素。简单来说，这意味着 对于相邻的垂直块级 正常文档流中的元素， 只有元素的边距 最大的保证金值将是 荣幸，而边际 边距值较小的元素 将折叠为零。

http://reference.sitepoint.com/css/collapsingmargins

没有办法解决这个问题 - 您可以尝试改用padding，或者通过考虑这一点来简单地增加边距。