我有一系列这样的元素：
<h1>...</h1> <p>.......</p> <h1>...</h1> <p>.......</p> <!-- etc. -->
我在h1上有5px的上边距,在p上有10px的下边距.但由此产生的利润仅为10px.如果我将底部保证金增加到50px并将最高保证金增加到40px,则总保证金仅为50px.
总保证金始终是最大的保证金.为什么？我该如何解决？
解决方法
您看到的行为称为保证金崩溃,这是预期的行为.基本上,当两个块级元素的边距接触时,它们会崩溃,并且只会出现最大的一个.
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.