css - margin 不推低另一个 margin

Question

我有一系列这样的元素:

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

h1 上边距为 5px，p 上边距为 10px。但是产生的边距只有 10px。如果我将底部边距增加到 50px，将顶部边距增加到 40px，则总边距只有 50px。

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

Answer 1

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

Margins collapse between adjacent elements. In simple terms, this means that for adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

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

对此没有唯一的解决方法 - 您可以尝试使用 padding 代替，或者通过考虑这一点来简单地增加边距。