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

我有一系列这样的元素：

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

我的上边距为 5pxh1，以及 10px 的下边距p。但最终的边距只有 10px。如果我将底部边距增加到 50px，将顶部边距增加到 40px，则总边距只有 50px。

总利润始终是最大利润。为什么？我该如何解决它？

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

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

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

没有一种方法可以解决这个问题 - 您可以尝试使用padding相反，或者只是通过考虑到这一点来增加利润。