Question

我有一系列这样的元素：

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

h1上的上边距为5px，p下边距为10px。但由此产生的利润仅为10px。如果我将底部保证金增加到50px并将最高保证金增加到40px，则总保证金仅为50px。

总保证金总是最大的保证金。为什么？我该如何解决？

Answer 1

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

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

没有人可以解决此问题 - 您可以尝试使用padding，或者只是考虑到这一点来增加边距。