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

Question

我有一系列这样的元素:

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

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

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

Answer 1

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

边距在相邻元素之间折叠.简单来说,这意味着对于正常文档流中的相邻垂直块级元素,只有具有最大边距值的元素的边距将被遵循,而具有较小边距值的元素的边距将被折叠为零.

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